setViewValue in direttiva su input che non aggiorna il valore di ingresso visibile effettivo

Question

Ho combattuto con questo per quasi due giorni. Spero che voi ragazzi possiate aiutarmi.

Riepilogo:
Ho problemi nell'impostare il valore di visualizzazione di alcuni campi di input in modo programmatico.
Ho un modulo con input i cui valori vengono salvati prima che il modulo venga rimosso (più elementi e più moduli possibili, l'utente potrebbe chiudere un modulo e riaprire in seguito). Alla riapertura del modulo voglio ripristinare i valori di visualizzazione precedenti (il motivo principale è di recuperare anche i valori di visualizzazione non validi che non sono stati salvati nel modello). Questo non funziona.

Se chiamo ctrl. $ SetViewValue (previousValue) Ottengo il modello (visibilmente) aggiornato (se valido), anche i valori di vista di formControl (durante il debug in console) vengono modificati, ma non li ottengo effettivamente reso nei campi di input. Non capisco il motivo per cui :(

ho ridotto il problema a questo violino:
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> 

Spero che voi ragazzi può spiegare a me perché questo non funziona e come risolvere questo ...

Answer 1

È necessario chiamare ngModel.$render() per visualizzare la modifica del valore di visualizzazione nell'input. Nessun orologio creato su $viewValue in modo che le modifiche vengano automaticamente riflesse.

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

Plnkr

implementazione predefinita di $render fa questo: -

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

Tuttavia è possibile ignorare e personalizzare l'implementazione per $render così ..

Answer 2

provare portata. $ apply() per invocare la modifica sul modello poiché ti piace modificare il modello fuori dal campo di applicazione di ngModel