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 ...
随机推荐
- 如何通过class文件来查看java的版本
我们知道class文件是通过javac编译生成的,如果我们想知道是java的那个版本生成的,该怎么做? 很简单,Linux下只要使用od命令,如下: 前四个字节为固定的cafe babe,接下来的四个 ...
- BZOJ1935或洛谷2163 [SHOI2007]园丁的烦恼
BZOJ原题链接 洛谷原题链接 很容易想到二维前缀和. 设\(S[i][j]\)表示矩阵\((0, 0)(i, j)\)内树木的棵数,则询问的矩形为\((x, y)(xx, yy)\)时,答案为\(S ...
- vim 中将 TAB 换成 4 个空格
最近开始学习Python,其语法简单,但是对代码格式要求比较严格.代码采用缩进方式,按照约定采用4个空格的缩进. Linux下配置vim编辑器中Tab键为4个空格方法: 1. 编辑文件: vi /et ...
- ES开发的一些坑(一)
一.ES-Hadoop导数据的时候报"Could not write all entries"异常 ES-Hadoop是一个开源的数据导入项目,支持数据从hdfs,hive,sp ...
- HTML 学习杂记
代码范例 <?php function testFunc1 () { echo 'testFunc1'; } $b = ; ?> <!DOCTYPE html PUBLIC &quo ...
- velocity 框架
Java模板引擎 Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅使用简单的模板语言(template language)来引用由java代码定义的对象 ...
- java ajax请求后台并获取到返回值
js: $.ajax({ url : '../Islogin.do', type : 'get', cache : false, dataType : 'json', success : functi ...
- day05作业---字典
# 字典找位置 用键, 列表.元组找位置 用索引'''1.有如下变量(tu是个元祖),请实现要求的功能tu = ("alex", [11, 22, {"k1": ...
- FASTDFS 安装与开发
FASTDFS介绍 FastDFS开源地址:https://github.com/happyfish100 简介 FastDFS 是一个开源的高性能分布式文件系统(DFS). 它的主要功能包括:文件存 ...
- $.cookie is not a function的错误原因
网上说的原因是:“手残导入2次jquery库文件 ” 是的,就是这个原因.引入了两次jquery.js