Javascript 角度指令控制器不'；看不到传递的参数更新

我在角度指令中使用Controllera时遇到问题。当数据作为参数传递给指令时，我想做一些简单的转换并将其传递给子指令。初始化时参数为空。它通过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
                }]
            }
        }
    });

angular.module（'myApp'，[]）
.directive（'testDirective'，function（）{
变量控制器=函数（）{
var vm=这个；
//“数据源”何时绑定到控制器？
控制台日志（vm）；
//当数据被推送到指令时，我必须在这里进行一些转换
if（vm.datasource！=未定义）{
vm.direlements=vm.datasource.elements；
}
};
返回{
控制器：控制器，
controllerAs:'ctrl'，
bindToController：对，
范围：{
数据源：'='，
},
模板：“
{{item}
”
}
})
.controller（'TestCtrl'，function（）{
var vm=这个，
电流={}；
vm.buttonClick=function（）{
console.log（'buttonClick'）；
vm.current={
要素：[{
“a”：1
}, {
b:2
}]
}
}
});

HTML:

推我

---

这里什么也没发生。控制器似乎不跟踪参数更改

由于传递的数据是

数据源

，因此它只查找该数据源的数据更改，而不是您创建的新变量，

vm.direlements

。因此，请这样做：

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

不要忘记在控制器中注入

$scope

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

---

祝您一切顺利。

代码中有两个问题

因此，首先，您仅在控制器的init上设置控制器变量

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 = {};

其他一切都好

下面是您的完整示例：

---

嗯，这是我不太明白的事情。为什么我要在上面设置$watch？据我所知，$watch仅在angular管辖范围外发生的事情时才需要，这里的更改是由angular ng click指令触发的，对吗？非常正确。您使用的是双向数据绑定参数，但在指令中引用的是另一个变量，因为您需要操作原始变量。如果您保持相同的变量angular将为您完成任务，但是指令内部的所有更改也将应用于定义该变量的外部。因此，在这种情况下，您需要侦听变量的更改，并刷新仅在指令内的变量。您也可以使用回调、事件，但实际上观察者是最短的方法。这有意义吗？有点，我认为如果我创建局部变量，它只引用angular已经观察到的对象的一部分，那么变量的内容将自动更新，或者我只是在这里创建数据的副本？Angular只负责更新标记为双向数据绑定的变量

vm.datasource

。如果在控制器开始时为该值分配了一个新变量，那么您只是在创建一个新变量，该变量在分配时引用了该变量的状态。稍后angular将只负责更新

vm.datasource

，但您的其他变量仍将指向

vm.datasource

的上一个值，我不太明白。数据源更新是由angular ng click指令触发的，因此angular应该知道这一点，而不需要在该指令上显式设置$watch。我在这里遗漏了什么？@ukaszKorona，在控制器初始化过程中，

if

只运行一次（因为它不是一个我们称之为反复运行的函数）。为了更新数据，我们需要明确地执行该操作。我就是这么做的。希望你能理解。

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

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