AngularJS - Controller kann ng-model Objekteigenschaft nicht lesen

Ich möchte einen Controller erstellen, der von anderen Ansichten wiederverwendet werden kann. (Diese Steuerung wird als Vorlage dienen)AngularJS - Controller kann ng-model Objekteigenschaft nicht lesen

Das Problem ist, dass ich nicht eine einfache Validierung machen, weil es nicht die Eigenschaften lesen kann, die in ng-model gesetzt ist, wenn ich Änderungen auf einem Feld gemacht, dann ist das Eigenschaft wird zu diesem Objekt hinzugefügt.

Ich möchte nicht ng-init="object.fieldName = null" zu jedem Feld aus meiner Sicht setzen, weil ich glaube, dass es keine gute Praxis ist. Ich habe versucht, $watch verwenden, aber das Objekt gleich noch {}

Hier ist mein Controller:

angular.module('practiceApp') 
.controller("CreateModalController", function($scope, items, defaultService) { 

    function initialize() { 
     $scope.object = {}; // <---- this should contain the ng-model object properties 
     $scope.defaultService = defaultService; 
     $scope.modalTitle = items.modalTitle; 

     $scope.$watch('object', function(newValue, oldValue) { 
      console.log(newValue); 
     }, true); 
    } 

    initialize(); 

});

Hier ist meine Ansicht:

<form name = "objectForm" 
     role = "form"> 
     <input type="text" 
      ng-model="object.firstName" 
      class="form-control" 
      placeholder="First Name" 
      ng-class="{'error-textfield': defaultService.isNotValid(object.firstName)}" 
      required> 

     <input type="text" 
      ng-model="object.lastName" 
      class="form-control" 
      placeholder="Last Name" 
      ng-class="{'error-textfield': defaultService.isNotValid(object.lastName)}" 
      required> 
</form>

Stromausgang =>object: {}

gewünschter Ausgang =>object: {firstname: undefined, lastName: undefined}

Quelle

2017-04-15 KennethC

Ich sehe nicht, dass Sie die Initialisierungsfunktion in der Ansicht aufrufen. –

Was meinen Sie mit "Aufruf der Initialisierungsfunktion in der Ansicht"? Ich habe den obigen Code aktualisiert, um ihn zu vervollständigen, aber ich rufe nur die Initialisierungsfunktion in meinem Controller auf. – KennethC

Die Ausgabe wird anfänglich object: {} sein, weil Sie ursprünglich $scope.object nicht deklariert haben, um irgendwelche Eigenschaften darauf zu haben. Es wird nur die firstName oder lastName Eigenschaft sichtbar, wenn Sie Text in die <input> eingeben, um ng-model in Aktualisierung $scope.object zu triggern.

Wenn Sie es zunächst zeigen, haben wollen, hat die gewünschte Ausgabe, die Sie zur Verfügung gestellt haben, erklären Sie Ihr Objekt zunächst in der Steuerung nicht definierte Eigenschaften haben:

$scope.object = { 
    firstName: undefined, 
    lastName: undefined 
};

Auf einer Seite beachten, sollten Sie nicht brauchen über Ihre initialize() Funktion in Ihrem Controller zu initialisieren, wenn Sie den Controller bereits in Ihrem Routing deklariert haben.

Wenn Sie AngularJS 1.5+ Komponenten verwenden, können Sie auch $onInit() verwenden.

Quelle

2017-04-15 04:49:40

hmm .. das Problem dabei ist, dass die Objektvariable auch von anderen create Features benutzt wird. Also sollten die Eigenschaften nicht statisch sein. – KennethC

Für die 'initialize() -Funktion, ich möchte nur meinen Code organisieren – KennethC

@KennethC, wenn das Ziel hier Validierung dieser Variablen ist, warum nicht auf der Vorlage mit AngularJS Form-Validierung validieren?Auf diese Weise kann Ihr Controller die Eigenschaften von '$ scope.object' völlig ignorieren. –

siehe Arbeitscode:

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<script> 
 
    
 
    
 
    var app = angular.module('practiceApp', []); 
 
    app.controller("CreateModalController", function($scope) { 
 

 
    function initialize() { 
 
     $scope.object = { 
 
      firstName: null, 
 
      lastName: null 
 
     }; // <---- this should contain the ng-model object properties 
 
     //$scope.defaultService = defaultService; 
 
     //$scope.modalTitle = items.modalTitle; 
 

 
     $scope.$watch('object', function(newValue, oldValue) { 
 
      console.log(newValue); 
 
     }, true); 
 
    } 
 

 
    initialize(); 
 

 
}); 
 
    
 
    
 
</script> 
 
<div ng-app="practiceApp" ng-controller="CreateModalController"> 
 
<form name="objectForm" 
 
     role="form"> 
 
     <input type="text" 
 
      ng-model="object.firstName" 
 
      class="form-control" 
 
      placeholder="First Name" 
 
      ng-class="{'error-textfield': defaultService.isNotValid(object.firstName)}" 
 
      required> 
 

 
     <input type="text" 
 
      ng-model="object.lastName" 
 
      class="form-control" 
 
      placeholder="Last Name" 
 
      ng-class="{'error-textfield': defaultService.isNotValid(object.lastName)}" 
 
      required> 
 
    
 
</form> 
 
    </div> 
 
</body> 
 
</html>

Auch wenn Sie nicht wollen, Werte initialisieren, werden Sie Werte von Vorname und Nachname sehen Sie nach der Eingabe beginnen. Während Benutzer nichts in Eingabefelder eingeben, gab es keine Werte in "Objekt", also gibt es nichts zu zeigen.

Haben Sie Fragen?

Quelle

2017-04-15 05:01:27 paulpeters

Die Variable 'object' sollte nicht statisch sein, weil ich diese als Vorlage verwenden werde. – KennethC

Beispiel: Es kann '{companionName: undefined, someProperties .....' – KennethC

Was ist Ihre eigentliche Aufgabe? und warum willst du das Objekt mit allen Feldern in der Konsole sehen? – paulpeters

AngularJS - Controller kann ng-model Objekteigenschaft nicht lesen

Antwort

Verwandte Themen