随笔- 1793 文章- 1 评论- 61 阅读- 298万

angular directive 的controllerAs的用法

原文： https://stackoverflow.com/questions/31857735/using-controlleras-with-a-directive

-------------------------------------------------------------------------------------

With "controllerAs", the controller instance alias - vm, in your case - is published on the scope as the .vm property of the scope.

So, to access its properties (i.e. the properties of the controller), you need to specify {{vm.text}} or ng-click="vm.click".

When you use controllerAs syntax, then you have to use

bindToController: true

it will work in your directive.

When using 'controllerAs' syntax ,as above,the scope is bound to the controller’s 'this' reference. So it allows us to introduce a new namespace('vm' here) bound to our controller without the need to put scope properties in an additional object literal(say $scope). So accessing anything in controller's scope,requires 'vm' namespace, as,

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

下面是另外一种风格的directive的写法：

<!DOCTYPE html>
<html ng-app="app">
 
  <head>
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
 
  <body>
    <h1>Hello Plunker!</h1>
    <test></test>
  </body>
 
</html>

angular
    .module('app', []);
 
angular
    .module('app')
    .directive('test', test);
 
function test() {
    return {
        restrict: 'E',
        template: '<button ng-click="vm.click()">{{vm.text}}</button>',
        controller: testCtrlaaa,
        controllerAs: 'vm'
    }
}
// 下面的这三行可以不要的。
//angular
//    .module('app')
//    .controller('testCtrlttttada', testCtrlaaa);
 
function testCtrlaaa() {
  var vm = this;
  vm.text = "TEST";
  vm.click= function(){
    alert('aaaa');
  }
}