angularjs - 将 ControllerAs 与指令一起使用

Question

我正在尝试遵循 John Papa 的 angularJS 风格指南 here并开始将我的指令切换为使用 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 的开头.

Here is a fork of your Plunk with the fix applied

问:你知道我如何访问作为属性传递给指令的属性，例如“范围:{文本:'@'}”？然后我是否被迫在 Controller 上使用 $scope 并设置 vm.text = $scope.text？

答:您引用的文章中，有a section 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