AngularJS中的controller和controllerAs的区别

在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