原文： 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: trueit 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');
}
}