Question

index.html是：

<!DOCTYPE html>

<html ng-app="myApp">
    <head>
        <script src="js/angular.js" type="text/javascript"></script>
        <script src="js/app.js" type="text/javascript"></script>
    </head>
    <body>
        <div>TODO write content </div>
        <input test type="text" ng-model="name" >
        <h1>name: {{name}}</h1>
    </body>
</html>

app.js是：

var app = angular.module('myApp', []);

app.directive('test', function () {
    return {
        require: '?ngModel',
        link: function ($scope, $element, $attr, controller) {
            if (!controller) {
                console.log("controller of ngModel not found");
                return;
            } else {
                console.log("controller of ngModel found");
                controller.$setViewValue('qwerty');
            }
        }
    };
});

在link函数的上述示例中，我使用controller中指定的ngModel选项访问require指令的DDO。然后使用该对象，我正在更新name的值，这会在<h1>name: {{name}}</h1>内更新index.html，但<input test type="text" ng-model="name">内index.html内也不会更新{{1}}。为什么它在一个地方更新而在另一个地方没有？

代码@ plnkr.co

Answer 1

来自角度来源：

同样重要的是要注意$setViewValue不会打电话 $render或以任何方式更改控件的DOM值。如果我们想以编程方式更改控件的DOM值，我们应该更新 ngModel范围表达式。

在此示例中，您可以：$parse($attr.ngModel).assign($scope, 'qwerty')

Answer 2

$ setViewValue不会直接更新$ modelValue，您需要触发$render()控制器上的ngModel功能，该功能会将$viewValue传递给$modelValue＆amp;因此，您将获得页面上的绑定。

<强>指令

app.directive('test', function () {
    return {
        require: '?ngModel',
        link: function ($scope, $element, $attr, controller) {
            if (!controller) {
                console.log("controller of ngModel not found");
                return;
            } else {
                console.log("controller of ngModel found");
                controller.$setViewValue('qwerty');
                controller.$render(); //to update $modelValue
            }
        }
    };
});

Forked Plunkr

为什么setViewValue（）在这种情况下不更新所有位置的值？

2 个答案: