angular 指令控制器没有看到传递的参数更新

Question

我在 angular 指令中使用 controllerAs 时遇到问题。当数据作为参数传递给指令时，我想做一些简单的转换并将其传递给子指令。初始化参数为空。它通过 ng-click 事件传递。

angular.module('myApp', [])
    .directive('testDirective', function() {
        var controller = function() {
            var vm = this;
            // when 'datasoure' is bound to the controller?
            console.log(vm);
            // I have to do some transformations here when the data is pushed to the directive 
            if (vm.datasource != undefined) {
                vm.direlements = vm.datasource.elements;
            }

        };
        return {
            controller: controller,
            controllerAs: 'ctrl',
            bindToController: true,
            scope: {
                datasource: '=',
            },
            template: '<div><li ng-repeat="item in ctrl.direlements">{{item}}</li></div>'
        }
    })
    .controller('TestCtrl', function() {
        var vm = this,
            current = {};

        vm.buttonClick = function() {
            console.log('buttonClick');
            vm.current = {
                elements: [{
                    'a': 1
                }, {
                    'b': 2
                }]
            }
        }
    });

HTML:

<body ng-app="myApp">
<div ng-controller="TestCtrl as test">
    <button ng-click="test.buttonClick()">push me</button>
    <test-directive  datasource="test.current"></test-directive>
</div>
</body>

这里没有任何反应。似乎控制器不跟踪参数更改。 Plunkr

Answer 1

由于传递的数据是 datasource，它只查找该数据的变化，而不是您创建的新变量，即 vm.direlements。所以，这样做：

<li ng-repeat="item in ctrl.datasource.elements">

它会完成你的工作。

或者如果你想像以前那样做，你可以使用 $watch 观看，如下所示：

$scope.$watch(angular.bind(this, function () {
    return this.datasource;
  }), function (newVal) {
    vm.direlements = vm.datasource.elements;
});

不要忘记在控制器中注入 $scope。

这是 plunker 尝试过的两种解决方案。

祝一切顺利。

Answer 2

您的代码有两个问题。

所以首先，你只在控制器的初始化时设置你的控制器变量direlements，但那时变量是未定义的，因为你在点击时设置了它。所以你需要一个 $watch 来保持更新并在控制器中注入 $scope:

vm.direlements = [];
      $scope.$watch(function() {
        return vm.datasource;
      }, function(oldValue, newValue) {
          if(typeof(newValue) !== 'undefined') {
            vm.direlements = vm.datasource.elements;
          }
      });

然后在你的主控制器中，你在开始时将 current 定义为局部变量，但你希望它作为 vm 变量，所以你应该使用这个：

var vm = this;
vm.current = {};

其他都没问题

这里是您的完整示例：

http://plnkr.co/edit/sALFVkSPIxVPOS42nOGu?p=preview

angular 指令控制器没有看到传递的参数更新

angular directive controller doesn't see passed parameters update

javascript

angularjs

angularjs-directive

angularjs-controlleras