AngularJS controller as vm方式

最新推荐文章于 2020-07-11 20:25:21 发布

Hellowongwong

最新推荐文章于 2020-07-11 20:25:21 发布

阅读量211

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shawnhu/p/8521368.html

版权

　　从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。

转载于:https://www.cnblogs.com/shawnhu/p/8521368.html

关注