setViewValue in der Direktive auf Eingabe nicht aktualisieren tatsächlichen sichtbaren Eingabewert

Question

Ich habe damit seit fast zwei Tagen gekämpft. Ich hoffe ihr könnt mir helfen.

Zusammenfassung:
Ich habe Probleme, den Ansichtswert einiger Eingabefelder programmatisch einzustellen.
Ich habe ein Formular mit Eingaben, deren Werte gespeichert werden, bevor das Formular entfernt wird (mehrere Elemente und mehrere Formulare möglich, Benutzer könnte ein Formular schließen und später wieder öffnen). Beim erneuten Öffnen des Formulars möchte ich die vorherigen Ansichtswerte wiederherstellen (Hauptgrund ist, auch die ungültigen Ansichtswerte zurück zu bekommen, die nicht im Modell gespeichert wurden). Dies funktioniert nicht.

Wenn ich ctrl. $ SetViewValue (previousValue) aufrufen Ich bekomme das Modell (sichtbar) aktualisiert (wenn gültig), die Ansicht Werte der FormControl (während des Debugging in der Konsole) sind auch geändert, aber ich bekomme sie nicht tatsächlich in den Eingabefeldern gerendert. Ich verstehe nicht, warum :(

ich das Problem auf diese Geige reduziert:
http://jsfiddle.net/g0mjk750/1/

Javascript

var app = angular.module('App', []) 

    function Controller($scope) { 
     $scope.form = { 
      userContent: 'initial content' 
     } 
    } 
app.controller('Controller', Controller); 
app.directive('resetOnBlur', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ngModel) { 
      element.bind('blur', function() { 
       console.log(ngModel); 
       scope.$apply(setAnotherValue); 
      }); 
      function setAnotherValue() { 
       ngModel.$setViewValue("I'm a new value of the model. I've been set using the setViewValue method"); 
      } 
     } 
    }; 
}); 

Html

<form name="myForm" ng-app="App" ng-controller="Controller" class="form"> 
    Text: {{form.userContent}} 
    <hr /> 
    If you remove the text, "Required!" will be displayed.<br/> 
    If you change the input value, the text will update.<br/> 
    If you blur, the text will update, but the (visible) input value not. 
    <hr /> 
    <input class="input" type="text" ng-model="form.userContent" name="userContent" reset-on-blur required></textarea> 
    <span ng-show="myForm.userContent.$error.required">Required!</span> 
</form> 

Ich hoffe, euch erklären ich, warum das nicht funktioniert und wie man das repariert ...

Answer 1

Sie müssen ngModel.$render() aufrufen, damit die Viewvalue-Änderung in der Eingabe widergespiegelt wird. Es wurde keine Uhr unter $viewValue erstellt, sodass Änderungen automatisch wiedergegeben werden.

function setAnotherValue() { 
     ngModel.$setViewValue("I'm a new value of the model. I've been set using the setViewValue method"); 
     ngModel.$render(); 
    } 

Plnkr

Standardimplementierung von $render tut dies: -

element.val(ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue); 

auch immer Sie Ihre Implementierung für $render auch ..

Answer 2

Umfang versuchen außer Kraft setzen und anpassen können. $ apply(), um Änderungen am Modell aufzurufen, da Sie das Modell ändern möchten außerhalb des Umfangs, in dem ngModel initiert wurde