AngularJS 1.5.5 Vorlage nicht bei der Arbeit des Controllers

Question

(Lern AngularJS, Version 1.5.5) Aliasing

ich den Code unter

<form ng-submit="addCust.submit()" ng-controller="AddCustomerCtrl as addCust"> 
    <div> <input type="text" ng-model="addCust.cName" required/> </div> 
    <div> <input type="text" ng-model="addCust.cCity" required/> </div> 
    <div> <button id="f1" type="submit" >Add Customer</button> </div> 
</form> 

Die controller.js bekam ist enthält den Code unten

helloWorldControllers.controller('AddCustomerCtrl', ['$scope', '$location', 
    function AddCustomerCtrl($scope, $location) { 
     $scope.submit = function(){ console.log('AddCustomerCtrl.submit !'); 
     $location.path('/addedCustomer/' + $scope.cName + "/" + $scope.cCity); }; 
    } 
]); 

Alles ist in Ordnung, wenn ich die Kontrolle in HTML vermeiden Aliasnamen ("AddCustomerCtrl als addCust")

Ich weiß nicht, wo ich falsch liege. Jede Hilfe ist willkommen. Danke im Voraus !

(... ja, ich bin neu in AngularJS)

Juan

Answer 1

Sie nicht $scope verwenden, wenn die Controller als Syntax. Ihr Controller sollte sein:

helloWorldControllers.controller('AddCustomerCtrl', ['$location', 
    function AddCustomerCtrl($location) { 
     this.submit = function(){ 
      console.log('AddCustomerCtrl.submit !'); 
      $location.path('/addedCustomer/' + this.cName + "/" + this.cCity); 
     }; 
    } 
]); 

Beachten Sie, dass, wenn Sie benötigen this zuzugreifen, wenn ein Versprechen löst Sie benötigen einen separaten lokalen Variable zu erstellen, da this nicht mehr im Kontext sein, wenn das Versprechen löst.

Answer 2

Versuchen mit folgendem Controller-Code:

helloWorldControllers.controller('AddCustomerCtrl', ['$scope', '$location', 
    function ($scope, $location) { 
     var addCust = this; 
     addCust.submit = function(){ 
      console.log('AddCustomerCtrl.submit !'); 
      $location.path('/addedCustomer/' + $scope.cName + "/" + $scope.cCity); 
     }; 
    } 
]); 

Answer 3

Wenn Sie controllerAs nutzen die Eigenschaften überall mit dem Alias ​​referenziert werden. Also sollten Sie addCust.cName und addCust.cCity in Ihrem Code haben. Ich würde empfehlen, $ scope überhaupt nicht in Ihren Controller zu injizieren und alle Verweise darauf aus dem Code zu entfernen. Wenn Sie nicht damit vertraut sind, sind die allgemein anerkannten Best Practices dafür hier gut dokumentiert: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md.