setViewValue在指令输入不更新实际可见的输入值 [英] setViewValue in directive on input not updating actual visible input value

问题描述

我一直在争取与此差不多两天。我希望你们能帮助我。

I've been fighting with this for almost two days. I hope you guys can help me.

摘要：结果
我有问题编程设置一些输入字段的视图值。结果
我有一个输入其值的形式被删除之前被保存（多元素和多种形式的可能，用户可以关闭窗体，后来又重新打开）的形式。开张大吉的形式我要恢复previous视图值（主要原因是为了找回它也没有保存在模型无效视图值）。这是行不通的。

Summary:
I have problems setting the view value of some input fields programatically.
I have a form with inputs whose values are saved before the form is removed (multiple elements and multiple forms possible, user might close a form, and reopen later). On reopening the form I want to restore the previous view values (main reason is to get back also the invalid view values which were not saved in the model). This doesn't work.

如果我叫Ctrl键。$ setViewValue（previousValue）我得到的模型（明显），更新（如果有效）不同，FormControl的角度值（而在控制台调试）被改变过，但我不让他们居然在输入字段呈现。我不明白为什么：（

If I call ctrl.$setViewValue(previousValue) I get the model (visibly) updated (if valid), the view values of the formControl (while debugging in console) are changed too, but I don't get them actually rendered in the input fields. I don't understand why :(

我的问题减小到这个小提琴：结果
http://jsfiddle.net/g0mjk750/1/

I reduced the problem to this fiddle:
http://jsfiddle.net/g0mjk750/1/

JavaScript的

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>

我希望你们能向我解释为什么这不工作，如何解决这一问题...

I hope you guys can explain to me why this doesn't work and how to fix this...

推荐答案

您需要调用<一个href=\"https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$render\"><$c$c>ngModel.$render()有反映在输入viewvalue变化。有没有关于 $ viewValue 创建手表，这样的变化会自动反映。

You need to call ngModel.$render() to have the viewvalue change reflected in the input. There is no watch created on $viewValue so that changes are automatically reflected.

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

Plnkr

Plnkr

的 $渲染默认实现不执行这样的： -

Default implementation of $render does this:-

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

不过您可以覆盖和自定义实施 $渲染以及..

这篇关于setViewValue在指令输入不更新实际可见的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！