Question

我正在使用angular构建一个相对较大的应用程序，我们目前正在进行规划和测试。在编写控制器时，我们未决定的一件事是控制器或经典的$ scope。我们向我们发送了一个服务模型定位器，因此每个控制器都会有一些注入依赖项。

我使用这两种方法构建了一个样本控制器 - 我想我的问题是 1.什么是正确/更好的方法 2.是否有另一种使用controllerAs注入的方法 3.是否存在性能差异和测试方法？

提前致谢

格雷格

经典$范围方法

angular.module('sdt.settingsctrl', [])
    .controller('SettingsCtrl', ['$scope','$log', 'ModalService','SettingsModel', function ($scope, $log, ModalService, SettingsModel) {
        $scope.data = SettingsModel.getData();
        $scope.settings = SettingsModel.settings()

        $scope.open = function(){
            var items = [{item:'item1'},{item: 'item2'},{item: 'item3'}];
            var modalOptions = {
                closeButtonText: 'Cancel',
                actionButtonText: 'OK',
                headerText: 'Adjust your settings',
                bodyText: items,
                result: $scope.callBack(),

                //optional - if you use this option feel free to
                //add more properties to work with your custom template
                template: 'partials/modals/settings.html'
            }


            ModalService.showModal({}, modalOptions).then(function (result) {
                $log.log(result);
            });
        }

        $scope.callBack = function() {
            return SettingsModel.settings();
        }
    }])

ControllerAs方法

angular.module('sdt.settingsctrl', [])
 .controller('SettingsCtrl', SettingsCtrl);

SettingsCtrl.$inject= ['$log', 'ModalService', 'SettingsModel'];

function SettingsCtrl($log, ModalService, SettingsModel){
    angular.extend(this, {
        data: SettingsModel.getData(),
        settings: SettingsModel.settings(),
        open:  function() {
            var items = [{item: 'item1'}, {item: 'item2'}, {item: 'item3'}];
            var modalOptions = {
                closeButtonText: 'Cancel',
                actionButtonText: 'OK',
                headerText: 'Adjust your settings',
                bodyText: items,
                result: this.callBack(),

                //optional - if you use this option feel free to
                //add more properties to work with your custom template
                template: 'partials/modals/settings.html'
            }


            ModalService.showModal({}, modalOptions).then(function (result) {
                $log.log(result);
            })
        },
        callBack: function() {
            return SettingsModel.settings();
        }
    })

};

Answer 1

我发现了要走哪条路的问题：ControllerAs与$ scopeto存在缺陷。这两种方法并不意味着相同或可互换，因此称之为经典＆＃34;有点用词不当。

$scope用于声明ViewModel属性在范围层次结构中可见 - 包括视图和子视图控制器。子控制器通过$ scope。
ControllerAs范例使控制器本身变得容易作为ViewModel并限制ViewModel对子的可见性控制器。子控制器无法轻松访问父控制器的范围。

我使用以下约定来区分以范围公开的属性和暴露于控制器的属性：

var VM = $scope.VM = ($scope.VM || {}); // scope-exposed
var vm = this; // controller-exposed

请考虑以下事项：

<div ng-controller="ParentCtrl as vm">
  {{vm.parentsProp}}
  <div ng-controller="ChildCtrl as vm">
     {{VM.scopeProp}}
     {{vm.childProp}}
     {{vm.parentsProp}} - not visible
  </div>
</div>

app.controller("ParentCtrl", function($scope) {
  var VM = $scope.VM = ($scope.VM || {});
  var vm = this;

  vm.parentsProp = "parentsProp";
  VM.scopeProp = "scopePropSetInParent";
});

app.controller("ChildCtrl", function($scope) {
  var VM = $scope.VM = ($scope.VM || {});
  var vm = this;

  vm.childProp = VM.scopeProp + " - augmented by Child";
});

plunker

===

作为补充，ControllerAs提供了另一种访问控制器的功能。 ViewModels通过别名（而不是不那么健壮$parent）这是一个强大的功能，但要小心，因为它可以在视图中创建意大利面条代码：

<div ng-controller="ParentCtrl as pvm">
   <div ng-controller="ChildCtrl as cvm">
      {{pvm.prop1 + cvm.prop2}}
   </div>
</div>

controllerAs vs $ scope - 写作，测试和性能

1 个答案: