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: 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');
}
}
angular directive 的controllerAs的用法的更多相关文章
- angular directive scope
angular directive scope 1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope: 2.当directive 中指定scope属 ...
- angular directive restrict 的用法
E 表示该指令是一个element; A 表示该指令是attribute; C 表示该指令是class; M 表示该指令是注视 实例如下: 原帖:www.thinkster.io/angularjs/ ...
- angular directive
1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式被声明: 取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A: E(元素):<directiveName ...
- Angular JS中$timeout的用法及其与window.setTimeout的区别
$timeout的用法 angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会 ...
- angular directive指令内的参数
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priori ...
- angular directive自定义指令
先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...
- AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...
- angular directive 深入理解
由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...
- angular directive指令的复用
“指令之之所以要定义成指令就是为了复用!” 指令一定是可以用在不同的controller里面的,为了在不同的controller去使用它,我们一定要给指定的配置项一个指令.这样才能跟外面的控制器进行交 ...
随机推荐
- gdrive无限网盘挂载systemd文件
我的博客新地址:www.liuquanhao.com --------------------------------------------------------------------- 首先应 ...
- 【转】spring 装配Bean中构造参数的注入
转载自:http://www.bianceng.cn/Programming/Java/201307/37027.htm spring 装配Bean中构造参数的注入 spring装配bean中还有一种 ...
- python排序sorted与sort比较
Python list内置sort()方法用来排序,也可以用python内置的全局sorted()方法来对可迭代的序列排序生成新的序列. sorted(iterable,key=None,revers ...
- [ Openstack ] Openstack-Mitaka 高可用之 Pacemaker+corosync+pcs 高可用集群
目录 Openstack-Mitaka 高可用之 概述 Openstack-Mitaka 高可用之 环境初始化 Openstack-Mitaka 高可用之 Mariadb-Galera集群 ...
- elasticsearch SpanNearQuery inOrder参数
一直没有注意还有一个inOrder参数: public SpanNearQuery(SpanQuery[] clauses, int slop, boolean inOrder) When inOrd ...
- Solidity 文档--第三章：Solidity 编程实例
Solidity 编程实例 Voting 投票 接下来的合约非常复杂,但展示了很多Solidity的特性.它实现了一个投票合约.当然,电子选举的主要问题是如何赋予投票权给准确的人,并防止操纵.我们不能 ...
- 浙江省第十二届省赛 Beauty of Array（思维题）
Description Edward has an array A with N integers. He defines the beauty of an array as the summatio ...
- (转帖)关于easyui中的datagrid在加载数据时候报错：无法获取属性"Length"的值，对象为null或未定义
结贴说明: 很感谢sp1234等人的热心帮忙和提醒,现在我主要说明下问题所在: 首先我在独立的js文件中,直接把测试数据loaddata进去datagrid是没有问题的.var kk = {" ...
- HDU 5969 最大的位或【贪心/按位或/思维】
链接 最大的位或 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Subm ...
- 使用Nginx+uWSGI部署Django项目
1.linux安装python3环境 参考链接:https://www.cnblogs.com/zzqit/p/10087680.html 2.安装uwsgi pip3 install uwsgi l ...