Question

我正在研究一个小提琴，我从this回答SO

我已通过以下方式改变了我的情况：

angular.module('sampleApp', [])
  .controller('myCtrl', function($scope) {
    $scope.func = function() {
     $scope.name = "Test Name";
    } 
  })
  .directive("myDirective", function($compile) {
    return {
      template: "<div>{{name}}</div>",
      scope: {
        name: '='
      },
      link: function(scope, element, attrs) {  
        alert(scope.name);
      }

    }
  });

基本上，我试图将范围函数中的变量值传递给指令 - 但警报消息显示未定义值。

知道这里出了什么问题吗？如何传递$ scope.func函数中$ scope.name中存储的值并将其传递给指令？

可以找到更新的小提琴here。

Answer 1

问题是您在控制器中的函数内定义名称，并且从不调用该函数。换到这个。

angular.module('sampleApp', [])
  .controller('myCtrl', function($scope) {
    $scope.name = "Test Name";
  })
  .directive("myDirective", function($compile) {
    return {
      template: "<div>{{name}}</div>",
      scope: {
        name: '='
      },
      link: function(scope, element, attrs) {  
        alert(scope.name);
      }

    }
  });

<div ng-app="sampleApp" ng-controller="myCtrl">

  <div my-directive name="name">
  </div>
</div>

Answer 2

警报功能在控制器设置数据之前执行。

要查看值更改，请添加控制器并使用$onChanges Life-Cycle Hook：

app.directive("myDirective", function() {
    return {
      template: "<div>{{name}}</div>",
      scope: {
        ̶n̶a̶m̶e̶:̶ ̶'̶=̶'̶
        name: '<'
      },
      controller: function() {  
        this.onChanges = function(changesObj) {
           if (changesObj.name) {
             alert(changesObj.name.currentValue);
           };
        };
      }
    }
});

另请注意，使用一次<绑定而不是双向=绑定。

将控制器变量值传递给AngularJS中的指令

2 个答案: