$ portata angolare come un oggetto letterale o multipla $ di

Question

Diciamo che ho il seguente controller

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

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

v'è alcuna ragione per cui non dovrei utilizzare letterali oggetto

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

Answer 1

Si potrebbe provare a utilizzare this invece di $scope. Usando la dichiarazione Controller As nelle proprie viste, si otterrà anche una notazione con punti nelle viste.

Il codice di controllo potrebbe quindi finire per assomigliare il seguente:

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

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

Utilizzando la controller come dichiarazione a suo avviso comporterà la seguente:

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

Quindi in questo esempio si finisce con meno codice, ma si mantiene la notazione dei punti nelle proprie visualizzazioni.

Si prega di notare che il controller come funzionalità non è disponibile pre angolare 1.2.0

Answer 2

perché si vuole portata per aggiungere più codice al tuo codice HTML. Dovrai accedere a una particolare variabile usando {{viewModel.username}}.

per evitare questo si potrebbe anche codice come questo

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

ma penso che il primo metodo è più facile da leggere, allora questa notazione. Ma non c'è alcun danno maggiore nell'usare uno qualsiasi degli approcci.

Answer 3

Personalmente preferisco usare letteralmente l'oggetto piuttosto che associare tutto $ scope. È gestibile e buona pratica.

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

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