发表于： 2016-08-22 22:52:18
0 1882
今天完成的事情：AngularJS 中的 controllerAs
明天计划的事情：就地编辑。。试试能整出来吧
遇到的问题：服务不会写
收获：还差很多啊
Controller 在 AngularJS 应用中可以说是无处不在， 可以在 html 中通过 ngController 指令来指定 Controller ， 语法为：
<ANY ng-controller="expression">
...</ANY>在 ngRoute 模块中使用， 语法为：
$routeProvider
.when('/my-url', { controller: 'MyController'
});在 ui.route 模块中使用， 语法为：
$stateProvider
.state('myState', {
controller: 'MyController'
})上面用法在 AngularJS 的社区、示例程序中非常普遍。 但是， 有一个细节可能很多人没有注意到， 那就是 controllerAs ， 上面的三种用法还可以分别这样使用：
<ANY ng-controller="expression as myExpr">
...</ANY>$routeProvider
.when('/my-url', { controller: 'MyController', controllerAs: 'ctrl'
});$stateProvider
.state('myState', {
controller: 'MyController',
controllerAs: 'ctrl'
})那么， 使用了 controllerAs 有什么区别呢？ 在 AngularJS 的文档中是这样说的：
- one binds methods and properties directly onto the controller using this: ng-controller=”SettingsController1 as settings”
- one injects $scope into the controller: ng-controller=”SettingsController2”
上面的意思是说， 就是使用 controllerAs 将直接绑定 Controller 的属性和方法， 而不使用 controllerAs 将绑定到为 Controller 注入的 $scope 参数， 下面用一个具体的例子来说明一下：
不使用 controllerAs 指令时， 通常我们这样做：
angular
.module('app', []).
controller('TestController', TestController);
TestController.$inject = ['$scope', '$window'];function TestController($scope, $window) {$scope.name = 'beginor';
$scope.greet = greet;
function greet() {$window.alert('Hello, ' + $scope.name);
}
}<div ng-Controller="TestController"><label>Name: <input type="text" ng-model="name" /></label><button type="button" ng-click="greet()"></div>在 HTML 视图中， 我们绑定的是 $scope 对象的属性和方法， 而不是 TestController 的实例。
上面的例子在使用 controllerAs 时， 可以修改成这样：
angular
.module('app', []).
controller('TestController', TestController);
TestController.$inject = ['$window'];function TestController($window) {this.name = 'beginor'; this.$window = $window;
}
TestController.prototype.greet = function () {this.$window.alert('Hello, ' + this.name);
}<div ng-Controller="TestController as vm"><label>Name: <input type="text" ng-model="vm.name" /></label><button type="button" ng-click="vm.greet()"></div>看到区别了吧， 使用 controllerAs 时， 可以将 Controller 定义成 Javascript 的原型类， 在 HTML 视图中直接绑定原型类的属性和方法。
这样做的优点是：
- 可以使用 Javascript 的原型类， 我们可以使用更加高级的 ES6 或者 TypeScript 来编写 Controller ；
- 避开了所谓的 child scope 原型继承带来的一些问题。填个坑 最后一个在控制器里要定义 var vm=this；
<div ng-repeat="value in ['red', 'green', 'blue']">
<label><input type="radio" ng-model="vm.color" ng-value="value"> {{value}} </label>
</div>
{{vm.color}}
angular.module('main', [])
.controller('vmtestCtrl', function () {
var vm = this;
});路由.state('vmtest',
{
url: '/vmtest',
templateUrl: 'view/vm.html',
controller: 'vmtestCtrl',
controllerAs: 'vm',
resolve: {
loadMyfile: _lazyLoad([
'css/vmtest.css',
'js/vmtest.js'
])
}
}
返回列表
评论