Question

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

您在代码中遇到两个问题。

首先，您只在控制器的init上设置控制器变量direlements，但此时变量未定义，因为您在单击时进行设置。所以你需要一个$ watch来保持更新并在控制器中注入$ scope：

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

然后在你的主控制器中你在开始时将当前变量定义为局部变量，但你想要它作为vm变量，所以你应该使用它：

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

所有其他事情都没问题。

所以这里是你的完整例子：

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

Answer 2

由于传递的数据是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。

一切顺利。

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

2 个答案: