Question

我有一个带有ng-model的表单输入以及我的自定义指令，它读取cookie数据并应设置输入值：

<form>
    <input type="text" id="name" ng-model="name" my-cookie-directive>
</form>

我的指示：

angular.module('myApp.directives').directive('myCookieDirective', ['CookieService', function(CookieService) {

    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            var cookieVal = CookieService.getCookie(attrs.ngModel);

            if(cookieVal != '') {
                ctrl.$setViewValue(cookieVal);
                elem.val(cookieVal); //not very cool hum?
            }
        }
    };
}]);

记录ctrl.$modelValue时，我可以看到正确的cookie数据已设置为我的控制器变量name，但输入保持空白。我知道$setViewValue没有触发$digest，因此尝试ctrl.$render()但没有任何反应。

我最终使用 jQuery 来设置input的值，这个值根本不令人满意。

提前致谢：）

Answer 1

使用$render并将传递给$evalAsync的函数中的所有内容包装：

if(cookieVal !== '') {
    scope.$evalAsync(function(){
      ctrl.$setViewValue(cookieVal);
      ctrl.$render();
    });
}

Plunker demo

Answer 2

你不想使用jQuery设置输入的值是正确的。如果你打算这样做，为什么要使用Angular呢？

你可以看到一个新的Plunker here，使用与提到的方法不同的方法。我的建议：当你想处理验证并格式化模型值时，使用NgModelController。

对于您当前的情况，您可以在指令中使用隔离范围，并使用cookie值将要更新的范围属性传递给它。然后在指令中，您可以简单地执行：

scope.cookieField = cookieVal;

Angular将处理数据绑定并更新视图值以匹配模型值。另外，这完全可以重复使用。

如何在调用$ setViewValue后更新输入的值

2 个答案: