结合使用ControllerA和指令

Question

我在这里尝试遵循John Papa的angularJS样式指南，并已开始将我的指令切换为使用controllerAs。但是，这不起作用。我的模板似乎无法访问分配给vm的任何内容。请参见这个非常简单的plnkr示例，该示例展示了该行为。

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

angular
    .module('app', []);

angular
    .module('app')
    .directive('test', test);

function test() {
    return {
        restrict: 'E',
        template: '<button ng-click="click">{{text}}</button>',
        controller: testCtrl,
        controllerAs: 'vm'
    }
}

angular
    .module('app')
    .controller('testCtrl', testCtrl);

function testCtrl() {
  var vm = this;
  vm.text = "TEST";
}

Answer 1

当使用controllerAs语法时，您不像通常那样访问$ scope，变量vm被添加到作用域，因此您的按钮需要变为：

<button ng-click="click">{{vm.text}}</button>

请注意，已vm.添加到的开头text。

这是应用了修复程序的Plunk的一个分支

问： 您知道如何访问作为指令的属性传递的属性，例如“ scope：{text：’@’}”吗？ 然后，我是否被迫在控制器上使用$
scope并设置vm.text = $ scope.text？

答：在您引用的文章中，有y075部分仅讨论这种情况。调查bindToController：

return {
    restrict: 'E',
    template: '<button ng-click="click">{{text}}</button>',
    controller: testCtrl,
    controllerAs: 'vm',
    scope: {
        text: '@'
    },
    bindToController: true // because the scope is isolated
};

然后您应该可以访问 vm.text