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

AngularJS controller as vm方式

三、指令中的Controller as

  AngularJS controller as vm方式

  AngularJS controller as vm方式

  问题:scope:{}属性声明的变量还是自动绑定到$scope,为了解决这个问题,1.3版本引入了属性bindToController:true,scope变量自动绑定到vm。

  AngularJS controller as vm方式

上一篇:哪个主播颜值最高?利用Python采集主播照片,检测颜值后制作排行榜,一目了然!


下一篇:Netty 源码解析(三): Netty 的 Future 和 Promise