Question

假设我有以下控制器

actionPerformed

我有什么理由不使用对象文字

angular.module('scopeExample', [])
    .controller('MyController', ['$scope', function ($scope) {
        $scope.username = 'World';

        $scope.sayHello = function () {
            $scope.greeting = 'Hello ' + $scope.username + '!';
        };
}]);

Answer 1

我个人更喜欢使用object literal而不是绑定$ scope。它易于管理和良好实践。

angular.module('scopeExample', [])
.controller('MyController', ['$scope', function ($scope) {
    var viewModel = {
        greeting: '',
        username: 'World'
    };

    viewModel.sayHello = function () {
        this.greeting = 'Hello ' + this.username + '!';
    };
    $scope.viewModel = viewModel;
}]);

Answer 2

您可以尝试使用this代替$scope。通过在视图中使用 Controller As 声明，您的视图中也会以点符号结束。

您的控制器代码最终可能如下所示：

angular.module('scopeExample', [])
    .controller('MyController', function () {
    var self = this;
    this.greeting = '';
    this.username = '';

    this.getName = function () {
        self.greeting = 'Hello ' + self.username + '!';
    };
}]);

在视图中使用控制器为声明将产生以下结果：

<div data-ng-controller="UserController as user">
       Hello {{ user.username }}
</div>

因此，在此示例中，您最终会得到更少的代码，但您在视图中保留了点符号。

请注意，Angular 1.2.0之前 Controller As 功能不可用

Answer 3

为什么要在HTML中添加更多代码？您必须使用{{viewModel.username}}访问特定变量。

为了避免这种情况，您也可以像这样编码

angular.module('scopeExample', [])
    .controller('MyController', ['$scope', function ($scope) {
        var viewModel = {
            greeting: '',
            username: 'World',
            sayHello: function(){
                this.greeting = 'Hello ' + this.username + '!';
            }
        };
        angular.extend($scope, viewModel);
}]);

但我认为第一种方法比这种表示法更容易阅读。但使用任何一种方法都没有重大损害。

Angular $ scope作为一个对象文字或多个$ scope

3 个答案: