AngularJS中如何将控制器变量值传递给指令？

嘿，我瞅了下你贴的代码，问题主要出在指令的绑定配置和模板调用方式上，咱们一步步来修正：

首先，你用了指令的隔离作用域scope: { name: '=' }，这意味着你需要在HTML里明确把控制器的name变量通过属性传递给指令，同时还要注意变量初始化和变化的监听逻辑。

完整可行的实现方案 #

1. HTML部分（正确调用指令并绑定变量）

<div ng-app="sampleApp" ng-controller="myCtrl">
  <!-- 点击按钮触发控制器里的赋值方法 -->
  <button ng-click="func()">设置名称</button>
  <!-- 把控制器的name变量绑定到指令的name属性上 -->
  <my-directive name="name"></my-directive>
</div>

2. JS部分（修正指令的监听逻辑）

angular.module('sampleApp', [])
 .controller('myCtrl', function($scope) {
  // 初始化变量，避免初始值为undefined
  $scope.name = "";
  $scope.func = function() {
    $scope.name = "Test Name";
  }
 })
 .directive("myDirective", function($compile) {
  return {
    template: "<div>指令里的名称：{{name}}</div>",
    scope: {
      // 双向绑定父作用域的name变量
      name: '='
    },
    link: function(scope, element, attrs) {
      // 初始时可能name还没赋值，用$watch监听变化更靠谱
      scope.$watch('name', function(newVal, oldVal) {
        if(newVal) {
          alert("指令捕获到名称变化：" + newVal);
        }
      });
    }
  }
});

关键要点解释 #

• 指令绑定方式：scope: { name: '=' }是双向绑定，要求你在指令标签上写name="name"——第一个name是指令隔离作用域的属性，第二个name是控制器作用域的变量名，两者要对应。
• 变量初始化：控制器里先给$scope.name设初始值（比如空字符串），避免指令初始时读取到undefined。
• 监听变量变化：因为你的name是通过按钮点击才赋值的，初始时指令的link函数执行时name还没值，所以用$watch监听变量变化，能在值更新时及时触发逻辑。

这样修改后，点击按钮设置名称，指令就能接收到控制器传递的变量值，模板也会同步显示更新后的内容啦～

内容的提问来源于stack exchange，提问作者221b