输入指令中的 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.

总结:
我在以编程方式设置某些输入字段的视图值时遇到问题.
我有一个带有输入的表单，其值在删除表单之前保存(可能有多个元素和多个表单，用户可能会关闭表单，然后再重新打开).在重新打开表单时，我想恢复以前的视图值(主要原因是还要取回未保存在模型中的无效视图值).这不起作用.

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

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...

推荐答案

你需要调用ngModel.$render() 使视图值更改反映在输入中.$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

$render 的默认实现是这样的:-

Default implementation of $render does this:-

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

但是，您也可以覆盖和自定义 $render 的实现..

However you can override and customize your implementation for $render as well..

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