Question

在另一个问题中我得到this answer。（演示：http://plnkr.co/edit/lYg15Xpb3CsbQGIb37ya?p=preview）

来自此的来源：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
    this.scenarios = []
    $timeout(function() {
         this.scenarios.push({name: 21});    
    }.bind(this), 1000);
});

MyDirectiveController.$inject = [];

function MyDirectiveController() {
     var vm = this;
     // code of this question...
}

app.directive('myDirective', function() {

    return {
        restrict: 'E',
        template: '<div>{{vm.scenarios[0].name}}</div>',
        scope: {
        scenarios: '='
        },
        controller: MyDirectiveController,
        controllerAs: 'vm',
        bindToController: true,
        replace: true
    }
});

HTML：

<body ng-controller="MainCtrl as vm">
    {{vm.scenarios}}
    <my-directive scenarios="vm.scenarios"></my-directive>
</body>

我现在的问题是，如何访问控制器中的vm.scenarios？

var vm = this;
console.log(vm.scenarios); // returns []

当我记录下来时：

var vm = this;
console.log(vm);

它返回Object { scenarios: Array[0] }，但是当我在浏览器中检查它时，scenarios包含预期的值，因为它在超时1秒后已更新。

但是当我们绑定到scenarios属性时，我需要在控制器内映射scenario：

vm.myscenarios = vm.scenarios.map(function(scenario) { 
     // .... 
})

我该怎么做？我应该看vm.scenarios进行更改吗？

使用控制器内的ControllerAs访问AngularJS指令中的vm属性

0 个答案: