2016-07-10 15 views
0

Ich benutze Angular und ich kann ein dynamisch erzeugtes Objekt nicht bearbeiten, obwohl es korrekt dargestellt wird (was bedeutet, dass die Bindung funktioniert).Angular - Bindung eines dynamisch erstellten Objekts

Ich habe die folgende Ansicht:

<html> 
    <head> 
    </head> 
    <body ng-app='TestApp'> 
    <div ng-controller='TestCtrl'> 
     <input ng-model="newModel().name"/> 
    </div> 
    </body> 
</html> 

und die folgenden Controller-Implementierung:

var TestApp = angular.module("TestApp", []); 

    function TestCtrl($scope) { 
     $scope.newModel = function(){ 
     return { name: 'Fresh' }  
     } 
    } 

Ich bin mit einem Verfahren zum Binden der richtige Objekt zurück, weil ich eine gewisse Logik müssen auszuführen um zu entscheiden, welches Objekt gebunden werden soll. Das Eingabefeld zeigt den korrekten, dynamisch erzeugten Wert an. Aber ich kann es anscheinend nicht bearbeiten.

Was mache ich falsch? Ist das der falsche Weg, um eine solche Funktionalität zu erreichen?

Danke.

+0

Warum brauchen Sie es als Funktion? Kannst du es nicht direkt als Scope-Variable deklarieren? – Chinni

+1

Sie können es nicht bearbeiten, da jedes Mal, wenn angle den Ausdruck auswertet, ein neues Objekt erstellt wird. Das macht viel Sinn. Erstellen Sie das Objekt einmal und speichern Sie das Objekt im Bereich. –

+0

@Chinni - Ich muss dynamisch entscheiden, welches das korrekte Objekt für die Bindung ist - entweder finde ein existierendes Objekt in einer Datenstruktur oder initialisiere ein neues Objekt. – Dani

Antwort

1

Anstatt ein Objekt zurückzugeben und eine Funktion an das Oszilloskop anzuhängen, können Sie in der Funktion eine scope Variable aktualisieren.

Controller-Code:

var TestApp = angular.module("TestApp", []); 

function TestCtrl($scope) { 
    $scope.newModel = {}; // initialize the scope variable 
    function updateScope() { 
     // do some logic 
     $scope.newModel = { name: 'Fresh' }; // update it with the required object 
    } 

    updateScope(); // run the function 
} 

HTML-Code:

<body ng-app='TestApp'> 
    <div ng-controller='TestCtrl'> 
     <!-- remove `()` since `newModel` is no longer a function --> 
     <input ng-model="newModel.name"/> 
    </div> 
</body> 

Hoffnung das das Problem löst.