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

  }

}

　　

angular directive 的controllerAs的用法的更多相关文章

  1. angular directive scope

    angular directive scope 1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope: 2.当directive 中指定scope属 ...

  2. angular directive restrict 的用法

    E 表示该指令是一个element; A 表示该指令是attribute; C 表示该指令是class; M 表示该指令是注视 实例如下: 原帖:www.thinkster.io/angularjs/ ...

  3. angular directive

    1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式被声明: 取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A: E(元素):<directiveName ...

  4. Angular JS中$timeout的用法及其与window.setTimeout的区别

    $timeout的用法 angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会 ...

  5. angular directive指令内的参数

    angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priori ...

  6. angular directive自定义指令

    先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...

  7. AngularJS中Directive指令系列 - 基本用法

    参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...

  8. angular directive 深入理解

    由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...

  9. angular directive指令的复用

    “指令之之所以要定义成指令就是为了复用!” 指令一定是可以用在不同的controller里面的,为了在不同的controller去使用它,我们一定要给指定的配置项一个指令.这样才能跟外面的控制器进行交 ...

随机推荐

  1. Google Breakpad: 实战crash .

    Google Breakpad: 实战crash . http://blog.csdn.net/zm_21/article/details/24795205 C/C++程序最棘手的时候就是一个字“挂” ...

  2. Oracle expdp

    exp                客户端工具expdp             服务端工具 expdp help=y  帮助命令directory         导出目录逻辑名 --查询默认数据 ...

  3. 【bzoj3439】KPM的MC密码

    这题乍一看后缀相等很烦的样子…… 其实如果把字符串倒过来,那么相等的后缀就可以转化成前缀,前缀相等扔进trie就可以了. 剩下无非是Trie的树链kth,主席树随便维护就好. 注意一个串彻底结束才能打 ...

  4. 存储过程 ----- navicat 创建存储过程

    以下为navicat 创建存储过程步骤图解: 1. 2. 3. 4. 在存储过程正文中是输入一行语句测试用,点击保存 5.输入存储过程名称,点击确定 6.到这来那么问题来了,会提示错误 7.切记存储过 ...

  5. 几个很好的OJ网站

    很友好的OJ网站(OJ是open judge,在线评测) POJ 北京大学ACM ZOJ 浙江大学ACM WOJ  武汉大学ACM(一个题目提交通过后,可以查看通过该题的所有代码) 唯一不好的地方是题 ...

  6. Python 进阶 之 map()函数

    map()函数主要功能是对批量的元素进行相同的操作时可以大幅度的缩减代码. map函数参数详解: map(param1,param2,***) param1:函数名 ,要对批量元素进行处理的funct ...

  7. Nginx网站根目录更改及导致403 forbidden的问题解决

    最近因为工作需要,要将Nginx网站根目录更改下,通过网上的一些教程更改后,但发现测试的时候一直提示403 forbidden错误,后台通过一个朋友的提示也解决了,所以现在将详细的步骤分享给大家,有需 ...

  8. The number of steps(概率dp)

    Description Mary stands in a strange maze, the maze looks like a triangle(the first layer have one r ...

  9. uva11168

    uva11168 题意 给出一些点坐标,选定一条直线,所有点在直线一侧(或直线上),使得所有点到直线的距离平均值最小. 分析 显然直线一定会经过某两点(或一点),又要求点在直线某一侧,可以直接求出凸包 ...

  10. 洛谷——P1722 矩阵 II

    P1722 矩阵 II 题目背景 usqwedf 改编系列题. 题目描述 如果你在百忙之中抽空看题,请自动跳到第六行. 众所周知,在中国古代算筹中,红为正,黑为负…… 给定一个1*(2n)的矩阵(us ...