从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方式的更多相关文章

  1. angularjs $scope与this的区别,controller as vm有何含义?

     壹 ❀ 引 初学angularjs的同学对于$scope一定不会陌生,scope(作用域)是将view(视图)与model(模板)关联起来的桥梁,通过controller(控制器)对于model的数 ...

  2. Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  3. 【转】Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  4. (十六)JQuery Ready和angularJS controller的运行顺序问题

    项目中使用了JQuery和AngularJS框架,近期定位一个问题,原因就是JQuery Ready写在了angularJS controller之前,导致JQuery选择器无法选中须要的元素(由于a ...

  5. angularjs不同页面间controller传参方式,使用service封装sessionStorage

    这里分享一个我在实际项目中,使用service封装的一个依赖sessionStorage的传参服务. 这里先说下大背景,在我们的实际开发中,登陆之后一般会存在一个token,这个token将会贯穿全场 ...

  6. angularjs controller 继承

    前沿 最近在angularjs项目当中,看到 controller 好多都是重复性的代码,在 controller 当中有好多代码很相似 function(比如 controller 下的 CRUD ...

  7. AngularJS的依赖注入方式

    在定义controller,module,service,and directive时有两种方式, 方式一: var myModule = angular.module('myApp', []); m ...

  8. 跟我学AngularJs:Controller数据共享、继承、通信使用具体解释

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用 本 ...

  9. Angularjs Controller间通信的几种方法

    先说最简单的,适合简单数据 一.使用controller as <body ng-controller="ParentCtrl as parent"> <inpu ...

随机推荐

  1. Centos7 开机启动命令行模式

    1.在图形界面下单击鼠标右键,选择“Konsole”: 2. 获取当前系统启动模式,输入:systemctl get-default 3.查看配置文件, cat /etc/inittab 4.通过以上 ...

  2. [转载]linux awk命令详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  3. 如何通过class文件来查看java的版本

    我们知道class文件是通过javac编译生成的,如果我们想知道是java的那个版本生成的,该怎么做? 很简单,Linux下只要使用od命令,如下: 前四个字节为固定的cafe babe,接下来的四个 ...

  4. BZOJ1217或洛谷2279 [HNOI2003]消防局的设立

    BZOJ原题链接 洛谷原题链接 该题有两种做法,树形\(DP\)和贪心. 先讲贪心. 先将所有点按深度从大到小排序,然后从大到小依次取出点,若已经被覆盖则跳过,否则就在它的祖父点建立消防站. 考虑如何 ...

  5. CODE[VS]2494 Vani和Cl2捉迷藏

    原题链接 这里有一个结论:最多能选取的藏身点个数等于最小路径可重复点覆盖的路径总数. 所以我们可以先传递闭包,然后求最小路径点覆盖即可. #include<cstdio> #include ...

  6. .net委托

    今天要学的是委托 委托的基本形式 直接上代码 public delegate int AddDelegate(int x,int y); class Program { static void Mai ...

  7. Windows使用SSH Secure Shell实现免密码登录CentOS

    笔记来自:http://blog.csdn.net/jiangshouzhuang/article/details/50683049 1.在Windows上生成密钥找到Secure Shell Cli ...

  8. 几种开源的TCP/IP协议栈分析

    1:BSD TCP/IP协议栈,BSD栈历史上是其他商业栈的起点,大多数专业TCP/IP栈(VxWorks内嵌的TCP/IP栈)是BSD栈派生的.这是因为 BSD栈在BSD许可协议下提供了这些专业栈的 ...

  9. 【Web】Nginx配置规则

    Nginx配置基本说明 以下是nginx的基本配置文件如下(编辑命令:vi /usr/local/nginx/conf/nginx.conf): #user nobody; #nginx进程数,建议设 ...

  10. Alpha 冲刺 (2/10)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助前端界面的开发 搭建测试用服务器的环境 完成 ...