angularjs - example - setViewValue en la directiva de entrada que no actualiza el valor de entrada visible real

ngmodel angular 5

Question

Llevo casi dos días peleando con esto. Espero que puedan ayudarme.

Resumen:
Tengo problemas para configurar el valor de vista de algunos campos de entrada programáticamente.
Tengo un formulario con entradas cuyos valores se guardan antes de que se elimine el formulario (es posible que haya varios elementos y varios formularios, el usuario podría cerrar un formulario y volver a abrir más tarde). Al volver a abrir el formulario, quiero restaurar los valores de vista anteriores (la razón principal es recuperar también los valores de vista no válidos que no se guardaron en el modelo). Esto no funciona.

Si llamo ctrl. $ SetViewValue (previousValue) También obtengo el modelo (visiblemente) actualizado (si es válido), los valores de vista de formControl (mientras se realiza la depuración en la consola) también se modifican, pero no los obtengo realmente en el campos de entrada No entiendo por qué :(

Reduje el problema a este violín:
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>

Espero que puedan explicarme por qué esto no funciona y cómo solucionarlo ...

Answer 1

pruebe el ámbito. $ apply () para invocar el cambio en el modelo, ya que le gusta cambiar el modelo fuera del ámbito donde se ingresó ngModel

Answer 2

ngModel.$render() llamar a ngModel.$render() para que el cambio del valor de vista se refleje en la entrada. No se crea un reloj en $viewValue por lo que los cambios se reflejan automáticamente.

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

Plnkr

La implementación predeterminada de $render hace esto:

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

Sin embargo, también puede anular y personalizar su implementación para $render ..