我试图在$routeProvider路由上使用controllerAs属性,但没有任何成功.
以下是示例代码：
var app = angular.module('app',['ngRoute']);
app.config(['$routeProvider','$locationProvider',function($routeProvider) {
$routeProvider
.when('/',{
template:'<div>This should be visible:{{ ctrl.one }}</div><div>This should not:{{ one }}</div>',controller: 'Ctrl',controllerAs: 'ctrl',});
}]);
app.controller('Ctrl',function($scope) {
$scope.one = 'actual';
});
不知道这是否是一个bug或者我做错了,This is a plnkr that demonstrates the issue
实际问题：
你似乎最初使用controllerAs(分配一个值为’ctrl’),但是后来没有在你的其他代码中使用它. (你使用$范围)
解：
Working demo as per your sample
当我使用controllerAs语法时,您需要使用以下模式之一来访问控制器的实例：
与将属性附加到$scope相反,您必须绑定到控制器作用域.注意这与$范围不同.由于缺乏更好的术语,您需要绑定控制器本身(将其视为其上下文).当我们处理显示层或视图模型时,我倾向于使用var vm = this;作为一个惯例,但这个个人喜好.
[A]：首选解决方案
app.controller('Ctrl',function() {
this.one = 'actual';
});
//or using 'vm' convention
app.controller('Ctrl',function() {
var vm = this;
vm.one = 'actual';
});
[B]
app.controller('Ctrl',function() {
var vm = {};
vm.one = 'actual';
return vm;
});
说明：
当我第一次开始使用Angular时,[B]是我使用的方法,纯粹来自Knockout背景.我习惯于绑定到一个“容器”对象,然后将对象绑定到视图.话虽如此,我更喜欢使用[A],或直接附加到$范围,并完全放弃别名.原因：
>我觉得它的清晰的ITO可读性
>如@ Swordfish0321所述,[A]性能更好(应该是您关心的)
>我有自定义指令的绑定问题我写道,在依赖某些父范围属性(特定于我的代码库)
就像一个视觉：
app.controller('Ctrl',function($scope) {
var vm = this;
vm.one = 'actual';
console.log($scope)
});
传递$scope对象并进一步检查它,您将看到一个新的ctrl子对象,其中包含所有公共属性和绑定到控制器代码中的vm的函数.这是因为你已经分配了var vm = this.意思是代码中的vm对象引用了控制器自己的作用域,最终绑定到视图.控制器基本上将控制器内部包含的所有属性和函数分组到一个以您提供的别名命名的新对象.
