Angular $ Umfang als ein Objektliteral oder mehr von $ scope

Question

Können sagen, ich habe folgenden Controller

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

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

gibt es keinen Grund, warum ich nicht Objektliterale

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

Answer 1

Sie könnten versuchen, this statt $scope verwenden. Durch die Verwendung der Controller Als Deklaration in Ihren Ansichten werden Sie auch mit einer Punktnotation in Ihren Ansichten enden.

Ihr Controller-Code könnte dann am Ende aussieht wie folgt aus:

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

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

Mit dem Controller Als Erklärung Ihrer Ansicht nach in den folgenden führen:

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

So in diesem Beispiel Sie haben weniger Code, aber Sie behalten die Punktnotation in Ihren Ansichten bei.

Bitte beachten Sie, dass die Controller Als Funktionalität nicht zur Verfügung steht vor Angular 1.2.0

Answer 2

Warum würden Sie verwenden soll, wollen um mehr Code zu deinem HTML hinzuzufügen. Sie müssen auf eine bestimmte Variable zugreifen, indem Sie {{viewModel.username}} verwenden.

Um dies zu vermeiden Sie auch, wie diese

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

Aber ich denke, die erste Methode, diese Notation Code könnte zu lesen einfacher ist dann. Aber es gibt keinen größeren Schaden bei der Verwendung eines der Ansätze.

Answer 3

Ich persönlich lieber Objekt Literal statt alles $ Scope zu binden. Seine überschaubare und gute Praxis.

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

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