角度：在“ Controller As”中使用“ this”代替“ $ scope”

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注入函數。 這是設置你的控制器是推薦的方式，請參見約翰爸爸的風格指南這里 。 具體來說，尋找規則[樣式Y031]。

如果您使用的是Angular 1.5.x，則還有一個選擇是使用組件而不是控制器。 聲明組件時，將指定與其關聯的標記，而這就是您要做的全部。 組件默認情況下使用ControllerAs語法，並且使用別名$ ctrl引用范圍。

Answer 4

您可以使用“ this”，但是它將始終指向觸發它的函數。 這將給您將來的限制或錯誤。 建議100％以角度使用$ scope，這樣您就可以在每個函數上使用標准格式以避免出現問題