从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. What is MaxiSys Pro MS908P Software Advantage

    The Autel Maxisys Pro Diagnostic Platform is an evolutionary smart solution for specialized automoti ...

  2. 判断and ,or

    and 和 or 是条件 与和或,记住一条,and 是两边同时都满足,or  是只有满足一个条件就成立. # print(1 or False) #条件1成立,条件2不成立.打印条件1 #返回: 1# ...

  3. ubuntu如何实现双屏显示

    转载自https://blog.csdn.net/tianmaxingkong_/article/details/50570538

  4. Homestead 修改 Homestead.yaml 文件后 vagrant up 报错的问题

    一般情况是 TAB 和空格的问题. 虽然表面看来,缩进是一致的. 但是 TAB 没能替换为空格,从而导致问题. 解决: $ sudo vim /etc/vim/vimrc.local syntax o ...

  5. 第一次java实验报告

    实验一Java开发环境的熟悉-1 步骤: mkdir +20165213exp1创建20165213exp1这个目录 cd +20165213zqh进入这个目录 mkdir+src+bin创建目录sr ...

  6. 嵌入式C编程代码优化笔记

    [优化永远是追求某种平衡而不是走极端,优化是有侧重点的,优化是一门平衡的艺术,它往往要以牺牲程序的可读性或者增加代码长度为代价] 1.选择合适的算法和数据结构 选择一种合适的数据结构很重要,如果在一堆 ...

  7. 【Linux】DNS基础(一)

    DNS基础 DNS 是计算机域名系统 (Domain Name System 或Domain Name Service) 的缩写,域名服务器是进行域名(domain name)和与之相对应的IP地址 ...

  8. mybatis学习 十二 多表查询

    Mybatis 实现多表查询方式: (1)业务装配.对两个表编写单表查询语句,在业务(Service)把查询的两个结果进行关联. (2)使用Auto Mapping特性,在实现两表联合查询时通过别名完 ...

  9. mysql练习题3

    USE day44; -- 1 查出所有员工的名字,薪资,格式为 -- <名字:egon> <薪资:3000> SELECT '姓名:',name,'薪资:',salary f ...

  10. AI学习经验总结

    我的人工智能学习之路-从无到有精进之路 https://blog.csdn.net/sinox2010p1/article/details/80467475 如何自学人工智能路径规划(附资源,百分百亲 ...