web-dev-qa-db-fra.com

setViewValue dans la directive sur l'entrée ne met pas à jour la valeur d'entrée visible réelle

Je me bats avec ça depuis presque deux jours. J'espère que vous pouvez m'aider.

Sommaire:
J'ai des problèmes pour définir la valeur d'affichage de certains champs de saisie par programme.
J'ai un formulaire avec des entrées dont les valeurs sont enregistrées avant la suppression du formulaire (plusieurs éléments et plusieurs formulaires possibles, l'utilisateur peut fermer un formulaire et le rouvrir plus tard). Lors de la réouverture du formulaire, je souhaite restaurer les valeurs de vue précédentes (la raison principale est de récupérer également les valeurs de vue non valides qui n'ont pas été enregistrées dans le modèle). Ça ne marche pas.

Si j'appelle ctrl. $ SetViewValue (previousValue) j'obtiens le modèle (visiblement) mis à jour (si valide), les valeurs de vue du formControl (pendant le débogage dans la console) sont également modifiées, mais je ne les obtiens pas réellement rendues dans le champs de saisie. Je ne comprends pas pourquoi :(

J'ai réduit le problème à ce violon:
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>

J'espère que vous pouvez m'expliquer pourquoi cela ne fonctionne pas et comment y remédier ...

angularjsangularjs-directiveangular-ngmodel
25
Allisone

Vous devez appeler ngModel.$render() pour que le changement de valeur d'affichage soit reflété dans l'entrée. Aucune montre n'a été créée le $viewValue pour que les modifications soient automatiquement reflétées.

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

Plnkr

Implémentation par défaut de $render est ce que ca:-

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

Cependant, vous pouvez remplacer et personnaliser votre implémentation pour $render ainsi que..

78
PSL