• home > webfront > ECMAS > angularjs >

    AngularJS中的controller和controllerAs的区别

    Author:zhoulujun@live.cn Date:

    在angularjs中,无论是angular自带的router还是ui-router都有迷糊的 :$routeProvider when(& 39; my-url& 39;,{controller:& 39;MyContro

    在angularjs中,无论是angular自带的router还是ui-router

    都有迷糊的 :

    $routeProvider
                    .when('/my-url', {
                        controller: 'MyController',
                        controllerAs: 'ctrl'
                    });
    $stateProvider
                    .state('myState', {
                        controller: 'MyController',
                        controllerAs: 'ctrl'
                    })

    尼玛:controllerAs是啥玩意呢??

    使用了 controllerAs 有什么区别呢? 

    controllerAs和controller 又有什么区别呢?

    在 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', function($scope, $window) {
            $scope.name = 'beginor';
            $scope.greet = greet;
            function greet() {
                $window.alert('Hello, ' + $scope.name);
            }
        });
    //即
    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 原型继承带来的一些问题, 具

    特别是在嵌套模块方面:

    嵌套块

    这种理解上的好处在嵌套块中更加明显:

        { { title } }
                { { title } }
                        { { title } }

    这个title可能是$scope继承树上的任意一个。而使用Controller as之后:

        { { main.title } }
                Scope title: { { another.title } }
            Parent title: { { main.title } }
                        Scope title: { { yet.title } }
                Parent title: { { another.title } }
                Parent parent title: { { main.title } }



    转载本站文章《AngularJS中的controller和controllerAs的区别》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/angularjs/2016_0713_7857.html