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 ...
随机推荐
- Ubuntu12.04下Qt连接MySQL数据库
本文介绍在Ubuntu12.04 (64 bit) 下使用Qt 4.8.2连接MySQL(Ver 14.14 Distrib 5.5.43)数据库. 1.安装 Qt 和 MySQL 若未安装以上软件, ...
- HDU 3861.The King’s Problem 强联通分量+最小路径覆盖
The King’s Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- c++智能指针(1)
根据muduo开源库作者陈硕的一些文章.对于多线程下C++编程提出了一些观点.主要是多线程下对象的销毁比较困难,但是由于多线程下,mutext是无法保护析构的.而后提出了智能指针的方案并对使用该指针会 ...
- IPV6修复工具
https://www.cnblogs.com/ysugyl/p/9000940.html
- jquery plugin 之 form表单验证插件
基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...
- ajax 简介0
WEB项目总是发生些新的变化,过去每个人都会抱怨WEB项目功能不如CS程序丰富,相应速度不够快速.但现在由于Ajax的出现有了很大的改观,具有快速的高响应性的用户界面.在传统的Web 应用程序中,当用 ...
- 【搜索】Dungeon Master
Description You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is co ...
- [html]Sublime Text添加插件
今天想在Sublime Text(简称ST)内编写HTML后直接使用浏览器看效果,想添加View in Browser插件,然后遇到奇怪的问题添加插件直接报"找不到有用的插件" 一 ...
- Lyft Level 5 Challenge 2018 - Final Round (Open Div. 2) C. The Tower is Going Home(思维+双指针)
https://codeforces.com/contest/1075/problem/C 题意 一个宽为1e9*1e9的矩阵中的左下角,放置一个车(车可以移动到同一行或同一列),放置一些墙,竖的占据 ...
- 6-具体学习git--分支冲突,rebase|| stash 临时修改
rebase很危险. https://morvanzhou.github.io/tutorials/others/git/