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去使用它,我们一定要给指定的配置项一个指令.这样才能跟外面的控制器进行交 ...
随机推荐
- 爬取genome的网页和图片
# -*- coding: utf-8 -*- # @Time : 2018/03/08 10:32 # @Author : cxa # @File : gethtmlandimg.py # @Sof ...
- gdrive无限网盘挂载systemd文件
我的博客新地址:www.liuquanhao.com --------------------------------------------------------------------- 首先应 ...
- 2.shell变量
shell的变量的介绍 shell的变量分为系统变量和用户自定义变量系统变量:$HOME, $PWD, $SHELL, $USER等等,这些变量系统已经定义好了,我们可以直接拿来用用户自定义变量:我们 ...
- python数据类型-----列表
今天来总结下python3.4版本列表的一些操作方法. 列表(list): 1.列表就像一个线性容器,但是比C++的 lis t扩展多得多,列表里的元素可以是相同类型,也可以包含各种类型,比如列表里嵌 ...
- background-clip,origin属性
background-clip是新增属性之一,其作用是确定背景的裁剪区域. background-clip语法: background-clip:margin-box | padding-box | ...
- win32 sdk列表视图控件（ListCtrl或ListView）资料整理
列表视图控件是一种非常常用的控件,在需要以报表形式显示数据时,列表控件通常是最好的选择,许多专用的数据报表控件,也是在它的基础上派生而来.与树视图类似,列表控件可以由多个子项目组成,可以设置为Icon ...
- docker从零开始 存储（二）volumes 挂载
使用volumes 卷是保存Docker容器生成和使用的数据的首选机制.mount binds依赖于主机的目录结构,而卷完全由Docker管理.卷绑定安装有几个优点: 与绑定装入相比,卷更易于备份或迁 ...
- PostgreSQL9.6.3的REDIS测试
安装redis_fdwcd /usr/local/srcgit clone https://github.com/pg-redis-fdw/redis_fdw.gitcd redis_fdw/git ...
- Spark GraphX宝刀出鞘，图文并茂研习图计算秘笈与熟练的掌握Scala语言【大数据Spark实战高手之路】
Spark GraphX宝刀出鞘,图文并茂研习图计算秘笈 大数据的概念与应用,正随着智能手机.平板电脑的快速流行而日渐普及,大数据中图的并行化处理一直是一个非常热门的话题.图计算正在被广泛地应用于社交 ...
- unity制作简单血条
学习Unity已经10天了,也没发现有什么长进,真的急.昨天仿着官方Demo做了个射击游戏轮廓,其中需要给每个怪做一个血条. 搜了一些,挺复杂的,用NGUI或者UGUI,外加很长的代码...不过还是找 ...