从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. jquery源码学习

    1,"use strict"; //16行   用在代码开始处,表示之后的代码将按照严格模式执行

  2. 用VS2010打开VS2012项目

    1.修改解决方案文件,即.sln文件: 用记事本打开.sln文件,把其中的 Microsoft Visual Studio Solution File, Format Version 12.00 # ...

  3. ubuntu12.04下安装Apache+PHP+MySQL

    一.Apache1.安装apache2: sudo apt-get install apache2 2.重启apache2: sudo /etc/init.d/apache2 restart 3.在浏 ...

  4. [AI]神经网络章2 神经网络中反向传播与梯度下降的基本概念

    反向传播和梯度下降这两个词,第一眼看上去似懂非懂,不明觉厉.这两个概念是整个神经网络中的重要组成部分,是和误差函数/损失函数的概念分不开的. 神经网络训练的最基本的思想就是:先“蒙”一个结果,我们叫预 ...

  5. python range用法

    1. range(n) 相当于枚举 从0<=i<n的整数 增量为1 for i in range(4): print(i) 结果:0 1 2 3 2. range(5,10) 相当于枚举 ...

  6. fastcgi vc6.0demo

    #include <WinSock2.h> #include <stdio.h> #pragma comment(lib, "ws2_32.lib") ty ...

  7. Magpie

    https://github.com/LLNL/magpie Magpie contains a number of scripts for running Big Data software in ...

  8. mysql数据库进阶篇

    一.连表操作 1)为何需要连表操作 .把所有数据都存放于一张表的弊端 .表的组织结构复杂不清晰 .浪费空间 .扩展性极差 2)表设计,分析表与表之间的关系 寻找表与表之间的关系的套路 举例:emp表 ...

  9. python里面的数学

    一.基本运算符 1.算数运算 2.比较运算 特殊情况:!= 不等于 新版本不支持 <> 不等号 3.赋值运算 4.逻辑运算 not : 非   非真即假,非假即真.   - and : 并 ...

  10. 2018.06.26「TJOI2018」数学计算(线段树)

    描述 小豆现在有一个数 xxx ,初始值为 111 . 小豆有 QQQ 次操作,操作有两种类型: 111 $ m$ : x=x×mx=x×mx=x×m ,输出 xxx modmodmod MMM : ...