头部背景图片
senrenbankaの部落格 |
senrenbankaの部落格 |

《AngularJS深度剖析与最佳实践》学习笔记(二)

controller as的学习


在之前这本书给出的代码中,有很多次看到这样的代码:

controller:controller as vm
.....
angular.module('MyApp').controller('demoController',function() {
    var vm = this;
    //这里配置vm的各种属性;
    vm.title = 'Angular';
    ....
});

事实上,这是Angular1.2版本后推出的语法糖,我们平常写controller,一般是通过$scope来绑定变量,然后在模板中调用$scope的属性去渲染模板;类似的代码如下:

angular.module('MyApp').controller('demoController',function($scope) {
    $scope.title = 'Angular';
    //各种配置数据逻辑
    ....
});

controller as的出现,使得controller不用再注入$scope服务,controller变得更加接近javascript对象,满足了喜好POJO的人的需求;下面是controller as在指令和模板中的运用的一个例子:

<div ng-app='MyApp' ng-controller='exampleController as Demo'>
    name:
</div>

...
angular.module('MyApp').controller('exampleController',function() {
    this.title = 'Angular';
});

打开界面,我们可以看到name:Angular,那么,这个是怎么实现的?书上给出了Angular中controller as的部分实现源码:

controllerInstance = $controller(controller,local);
//controller即为我们上下文环境的controller,由$controller产生对应的controller实例对象
....
//如果指令as后面指定了名称
if(directive.controlleras) {
    //将controller实例对象赋予到$scope对应名称的属性上
    local.$scope[directive.controlleras] = controllerInstance;
}

上边的注释是我根据自己的理解加的,从源码可以看出,controller as实际上就是将controller实例赋值到$scope上的一个属性中,属性名即为我们指定的名称,这样做的话,我们便可以在不注入$scope服务的情况下将数据绑定到模板上,只不过媒介变为了controller,controller等于变成了我们常用的javascript对象了。

那么,controller as这货可以用在哪些地方呢?

指令上:

一般的代码形式是:

angular.module('MyApp').directive('directiveAs',function() {
    return {
        restrict: 'EA',
        template: '<div></div>',
        controller: 'DemoController',
        controllerAs: 'vm'
    };
});

这样有个问题,很明显上面的格式是组件型指令的格式,组件型指令我们一般用独立作用域,即添加scope:{},但是scope:{}的属性是不会绑定到我们指定的vm的,它会绑定到$scope上,而我们期望的是:
$scope->$scope.vm->scope:{}绑定的属性,这个问题其实很好解决,只需在上面添加bindToController:true就行了。

路由上:

比如,我们可以在ui-router这样指定:

$stateProvider.state('demo',{
    url: '....',
    templateUrl: '....',
    controller: 'demoController as vm'
});

据说,用controller as,然后在模板中用$scope的属性去访问controller实例的数据可以有效避免“javascript原型链继承对于值类型的坑”(书上所说,会在后面章节提到),我并不是很理解,等我看到后面一点章节再提提这个东西吧,现在还不是很懂这个坑是什么坑,controller as又是怎么有效避免的。

avatar AONOSORA 今生今世轮回尽, 来世愿为幻想乡