AngularJS指令，ControllerAs，范围和VM属性(AngularJS directi

采用了棱角分明我创造了这样的指令：

angular
    .module('my-module', [])
    .directive('myDirective', function () {

        return {
            restrict: 'E',
            templateUrl: currentScriptPath.replace('.js', '.html'),
            scope: {
                scenarios: '='
            },
            controller: MyDirectiveController,
            controllerAs: 'vm',
            bindToController: true,
            replace: true
        }

    });

MyDirectiveController ：

MyDirectiveController.$inject = ['$scope'];

function MyDirectiveController($scope) {
    var vm = this;
    vm.scenarios = $scope.scenarios;
}

我的指令HTML模板是这样的：

<div>{{vm.scenarios[0].name}}</div>

在我父视图HTML我使用的指令是这样的：

<my-directive scenarios="vm.scenarios"></my-directive>

父控制器有一个属性：

vm.scenarios = [] // could be [{ name : "test"}]

由于vm.scenarios父控制器的得到的$ HTTP设置后调用，当它不可vm.scenarios指令控制器绑定到$scope.scenarios并没有更新的家长控制时， vm.scenarios被最终填充。

当添加这我的指令控制器，它的工作原理，但解决方案似乎我错了：

$scope.$watch('scenarios', function(newValue) {
    if (newValue !== undefined) {
            vm.scenarios = $scope.scenarios;
    }
});

Answer 1:

这是你应该如何定义你的指令控制器：

MyDirectiveController.$inject = [];

function MyDirectiveController() {
    // nothing here
}

你不需要使用$scope ，因为你已经绑定到控制器实例this 。 这意味着，范围配置

scope: {
    scenarios: '='
},

填充控制器实例this对象，而不是$scope对象，因此$scope.scenarios是undefined 。 随着vm.scenarios = $scope.scenarios; 在控制器，你只是简单地覆盖正确未定义值绑定。

演示： http://plnkr.co/edit/lYg15Xpb3CsbQGIb37ya?p=preview

文章来源: AngularJS directive, ControllerAs, scope and vm property