Question

我想使用“this”而不是$ scope，因为我有一个不初始化$ scope的控制器结构：

.controller('MyCtrl', function($scope) {
    ... 
});

我必须遵循上面结构的教程，并使用$ scope服务使其工作。

控制器

(function() {
'use strict';

angular
.module('example.cancha')
.controller('CanchaController', CanchaController);

CanchaController.$inject = ['$state','$scope', 'canchaService'];

function CanchaController($state, $scope, canchaService) {
var vm = angular.extend(this, {
    canchasComplejo: []
    });



(function activate() {
    cargarCanchasComplejo();

})();

//funcion que llama al servicio para obtener las canchas del complejo
function cargarCanchasComplejo() {
    canchaService.obtenerCanchasComplejo()
        .then(function(canchasComplejo) {
            vm.canchasComplejo = canchasComplejo;
        $scope.groups = [];
        for (var i=0; i<canchasComplejo.length; i++) {
            $scope.groups[i] = {
                name: 'Cancha N°'+canchasComplejo[i].nroCancha+' ('+canchasComplejo[i].tipoCancha+')',
                items: ['Información','Habilitada','Ver Agenda'],
                show: false
            }
        };

      $scope.toggleGroup = function(group) {
        group.show = !group.show;
      };
      $scope.isGroupShown = function(group) {
        return group.show;
      };
    });
}
}
})();

如您所见，这不是常规结构。我可以使用“this”避免使用$ scope吗？谢谢！

Answer 1

当然，您可以使用John Papa所谓的vm模式。查看此处的文章https://daveceddia.com/convert-scope-to-controlleras/

Answer 2

从控制器中删除 $ scope 注入：

CanchaController.$inject = ['$state','$scope', 'canchaService'];
function CanchaController($state, $scope, canchaService) {
  .....

应该是：

CanchaController.$inject = ['$state', 'canchaService'];
function CanchaController($state, canchaService) {

然后用 vm 替换控制器范围内的所有 $ scope 次出现： $scope.groups = [];变为vm.groups = [];

现在请注意，在使用此控制器的HTML中，您无法直接访问组，但您应该使用ng-controller="CanchaController as vm"（免费填写使用任何名称而不是 vm ）和 vm.groups 访问组。您的HTML可能如下所示：

<div ng-controller="CanchaController as vm">
  <pre>{{ vm.groups | json }}</pre>
</div>

如果此控制器与路由或指令一起使用，那么 controllerAs：'vm'应该在JS级而不是HTML上设置

Answer 3

您应该使用ControllerAs语法，而不是将$ scope注入函数。这是设置控制器的推荐方法，请参阅John Papa的风格指南here。具体来说，寻找规则[Style Y031]。

如果您使用的是Angular 1.5.x，则另一个选项是使用Components而不是Controllers。声明Component时，您将指定与之关联的标记，这就是您所要做的。 Component默认使用ControllerAs语法，它使用别名$ ctrl来引用范围。

Answer 4

您可以使用“this”但它始终指向触发它的函数。这将限制你的未来或错误。 100％建议在角度使用$ scope，这样你就可以在每个函数上使用标准格式来避免问题

Angular：在“Controller As”中使用“this”而不是“$ scope”

4 个答案: