AngularJS controller as vm方式
从AngularJS1.20开始引入了Controller as 新语法,以前版本在Controller 中必须注入$scope这个服务,才能在视图绑定中使用这些变量,$scope不是那么POJO(普通纯粹的JavaScript对象)。
一、基本用法
1.20以前版本:
angular.module("myModule").controller("MyController", function($scope){
$scope.title = "Angular";
});
<div ng-app="myModule" ng-controller="MyController">
hello:{{tittle}}!
</div>
1.20及以后版本
angular.module("myModule").controller("MyController", function(){
this.title = "Angular";
});
<div ng-app="myModule" ng-controller="MyController as demo">
hello:{{demo.tittle}}!
</div>
推荐用法:
angular.module("myModule").controller("MyController", function(){
var vm = this;
vm.title = "Angular";
return vm;
});
分析源码,得知Controller对象实例以as别名放在$scope上,所以视图模板能够访问到。
二、路由中的Controller as
三、指令中的Controller as
问题:scope:{}属性声明的变量还是自动绑定到$scope,为了解决这个问题,1.3版本引入了属性bindToController:true,scope变量自动绑定到vm。
AngularJS controller as vm方式的更多相关文章
- angularjs $scope与this的区别,controller as vm有何含义?
壹 ❀ 引 初学angularjs的同学对于$scope一定不会陌生,scope(作用域)是将view(视图)与model(模板)关联起来的桥梁,通过controller(控制器)对于model的数 ...
- Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- 【转】Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- (十六)JQuery Ready和angularJS controller的运行顺序问题
项目中使用了JQuery和AngularJS框架,近期定位一个问题,原因就是JQuery Ready写在了angularJS controller之前,导致JQuery选择器无法选中须要的元素(由于a ...
- angularjs不同页面间controller传参方式,使用service封装sessionStorage
这里分享一个我在实际项目中,使用service封装的一个依赖sessionStorage的传参服务. 这里先说下大背景,在我们的实际开发中,登陆之后一般会存在一个token,这个token将会贯穿全场 ...
- angularjs controller 继承
前沿 最近在angularjs项目当中,看到 controller 好多都是重复性的代码,在 controller 当中有好多代码很相似 function(比如 controller 下的 CRUD ...
- AngularJS的依赖注入方式
在定义controller,module,service,and directive时有两种方式, 方式一: var myModule = angular.module('myApp', []); m ...
- 跟我学AngularJs:Controller数据共享、继承、通信使用具体解释
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用 本 ...
- Angularjs Controller间通信的几种方法
先说最简单的,适合简单数据 一.使用controller as <body ng-controller="ParentCtrl as parent"> <inpu ...
随机推荐
- Centos7 开机启动命令行模式
1.在图形界面下单击鼠标右键,选择“Konsole”: 2. 获取当前系统启动模式,输入:systemctl get-default 3.查看配置文件, cat /etc/inittab 4.通过以上 ...
- [转载]linux awk命令详解
简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...
- 如何通过class文件来查看java的版本
我们知道class文件是通过javac编译生成的,如果我们想知道是java的那个版本生成的,该怎么做? 很简单,Linux下只要使用od命令,如下: 前四个字节为固定的cafe babe,接下来的四个 ...
- BZOJ1217或洛谷2279 [HNOI2003]消防局的设立
BZOJ原题链接 洛谷原题链接 该题有两种做法,树形\(DP\)和贪心. 先讲贪心. 先将所有点按深度从大到小排序,然后从大到小依次取出点,若已经被覆盖则跳过,否则就在它的祖父点建立消防站. 考虑如何 ...
- CODE[VS]2494 Vani和Cl2捉迷藏
原题链接 这里有一个结论:最多能选取的藏身点个数等于最小路径可重复点覆盖的路径总数. 所以我们可以先传递闭包,然后求最小路径点覆盖即可. #include<cstdio> #include ...
- .net委托
今天要学的是委托 委托的基本形式 直接上代码 public delegate int AddDelegate(int x,int y); class Program { static void Mai ...
- Windows使用SSH Secure Shell实现免密码登录CentOS
笔记来自:http://blog.csdn.net/jiangshouzhuang/article/details/50683049 1.在Windows上生成密钥找到Secure Shell Cli ...
- 几种开源的TCP/IP协议栈分析
1:BSD TCP/IP协议栈,BSD栈历史上是其他商业栈的起点,大多数专业TCP/IP栈(VxWorks内嵌的TCP/IP栈)是BSD栈派生的.这是因为 BSD栈在BSD许可协议下提供了这些专业栈的 ...
- 【Web】Nginx配置规则
Nginx配置基本说明 以下是nginx的基本配置文件如下(编辑命令:vi /usr/local/nginx/conf/nginx.conf): #user nobody; #nginx进程数,建议设 ...
- Alpha 冲刺 (2/10)
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助前端界面的开发 搭建测试用服务器的环境 完成 ...