angularjs – 使用ControllerAs与指令

前端之家收集整理的这篇文章主要介绍了angularjs – 使用ControllerAs与指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图遵循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";
}
当使用controllerAs语法时,您不会像通常那样访问$ scope,变量vm将添加到作用域,因此您的按钮需要变为:

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

注意vm。添加到文本的开头。

Here is a fork of your Plunk with the fix applied

问:你知道我将如何通过属性传递属性到指令,例如“scope:{text:’@’}”?然后我被迫在控制器上使用$ scope,并设置vm.text = $ scope.text?

A:在你引用的文章中,有a section y075会谈到这种情况。看看bindToController:

return {
    restrict: 'E',controllerAs: 'vm',scope: {
        text: '@'
    },bindToController: true // because the scope is isolated
};

那么你应该可以访问vm.text

原文链接:https://www.f2er.com/angularjs/144548.html

猜你在找的Angularjs相关文章