setViewValue w dyrektywie na wejściu nie aktualizuje rzeczywistej widocznej wartości wejściowej

Question

Walczyłem z tym przez prawie dwa dni. Mam nadzieję, że mi pomożesz.

Podsumowanie:
Mam problemy z programowym ustawieniem wartości widoku niektórych pól wejściowych.
Mam formularz z wejściami, których wartości są zapisywane przed usunięciem formularza (możliwe jest użycie wielu elementów i wielu formularzy, użytkownik może zamknąć formularz i ponownie go otworzyć). Przy ponownym otwarciu formularza chcę przywrócić poprzednie wartości widoku (głównym powodem jest odzyskanie nieprawidłowych wartości widoku, które nie zostały zapisane w modelu). To nie działa.

Jeśli zadzwonię ctrl. $ SetViewValue (previousValue) Otrzymuję model (widocznie) zaktualizowany (jeśli jest prawidłowy), zmieniono również wartości widoku formControl (podczas debugowania w konsoli), ale ich nie otrzymuję faktycznie renderowane w polach wejściowych. Nie rozumiem dlaczego :(

I zmniejszona problem do tego ryba:
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> 

Mam nadzieję, że chłopaki mogą wyjaśnić mi dlaczego to nie działa i jak to naprawić ...

Answer 1

Należy wywołać ngModel.$render(), aby zmiana wartości widoku została odzwierciedlona na wejściu. Nie ma zegarka utworzonego na $viewValue, więc zmiany są automatycznie odzwierciedlane.

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

Plnkr

Domyślna implementacja $render robi to: -

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

Można jednak przesłonić i dostosować realizację dla $render jak dobrze ..

Answer 2

spróbować zakresu. $ apply(), aby wywołać zmianę w modelu, ponieważ lubisz zmieniać model poza zakresem, w którym ngModel był wprowadzany