javascript - Angular路由中的controller常常有as vm, 有何作用?
本文介绍了javascript - Angular路由中的controller常常有as vm, 有何作用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
比如下面这段代码:
$stateProvider.state({
name: 'reader.create',
url: '/create',
templateUrl: 'controllers/reader/create.html',
controller: 'ReaderController as vm'
});
但是在对应的controller中, 又有
var vm = this;
这么一句.
这到底有什么用?
解决方案
首先这里的 vm 是指 View Model。
其实,关于这个问题,有三个重要的原因:
历史原因
controller as
是1.2之后才有,和 $scope
作用其实一样,哪怕你混合着用也是没有问题,但这样看起来非常的奇怪。
模板作用域
当然,不光如此,不然还要造个 controller as
做什么,是吧!
这是因为早先 $scope
对于子组件默认继承父组件的数据,但又不会被覆盖,而反之又是隔离的,例如:
function ParentCtrl($scope) {
$scope.name = 'asdf';
$scope.age = 25;
}
function ChildCtrl($scope) {
$scope.age = 26;
}
<div ng-controller="ParentCtrl">
<p>name:{{name}},age:{{age}}</p>
<div ng-controller="ChildCtrl">
<p>child name:{{name}},age:{{age}}</p>
</div>
</div>
ChildCtrl
并没有定义 name
,但依然可以显示:asdf。这就是继承关系,通过这种方式来访问一些变量很不可靠,或者说并不直观。所以,才有 controller as
。
<div ng-controller="ParentCtrl as p">
<p>name:{{p.name}},age:{{p.age}}</p>
<div ng-controller="ChildCtrl as c">
<p>child name:{{p.name}},age:{{c.age}}</p>
</div>
</div>
这样的写法不是更明了,直观了吗?
控制器 $scope !== this
先理解模板,那再看这一条就明了许多。
为了不让 $scope
默认继承父组件的内容,因此需要使用 this
让这些东西不再和子组件有瓜葛。
function ChildCtrl($scope) {
var vm = this;
console.log(vm === $scope) // false;
}
this
与 $scope
完全不一样,前者就是明确表示控制组实例,而后者是一个比较奇特的this怪咖。
最后关于 var vm = this
,你要愿意叫一个 var funkScopeTenThousandsYear = this
也行。
以上!
这篇关于javascript - Angular路由中的controller常常有as vm, 有何作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文