Question

我正在研究为<input>制作的指令，用于观察用户输入的内容。当用户键入有效的电话号码时，它应重新格式化输入模型对象并将变量设置为true，向父作用域指示模型现在包含有效的电话号码。

CountryISO是作为常量注入的依赖项，包含 - 意外 - 用户的国家/地区代码。该指令中使用的函数来自phoneformat.js

更新：现在有效= true / false分配有效。但是，如何更新实际模型值？这需要更改为格式正确的电话号码。

app.directive('phoneFormat', ['CountryISO', function (CountryISO) {
            return {
                restrict: 'A',
                require: 'ngModel',
                scope: {
                    valid:'='
                },
                link: function (scope, element, attrs, ngModel) {

                scope.$watch(function() {
                return ngModel.$viewValue; //will return updated ng-model value
                }, function(v) {

                if (isValidNumber(v, CountryISO)) {

                    // What do I do here? This doesn't work.
                    v = formatE164(CountryISO, v);
                    // This neither
                    ngModel.$viewValue = formatE164(CountryISO, v);

                    console.log("valid");
                    scope.valid = true;

                } else {

                    console.log("invalid");
                    scope.valid = false;
                }
                });
                }
            };
        }]);

作为指令

和html看起来像：

<input data-phone-format data-valid="user.validPhoneNumber" data-ng-model="user.info.ph">

问题是，只要我将scope: {valid:'='},作为指令的一部分包含在内，$ watch就会停止工作。我如何得到两者？我希望指令能够指向父作用域中的一个变量，该变量应该从true变为false，具体取决于电话号码的有效性。

Answer 1

因为当您声明观察者时，变量正在使用指令范围进行解析，该范围在您添加scope: {valid:'='}以使其正常工作后成为隔离范围，您可以将注意放在ngModel.$viewValue

上

要更新ngModel值，您可以使用$viewValue＆amp; $setViewValue方法设置ngModel ngModel。然后在$modelValue内$render()更新ngModel内的值{/ 1}}。

继续阅读$viewValue & $modelValue

链接

link: function(scope, element, attrs, ngModel) { scope.$watch(function() { return ngModel.$viewValue; //will return updated ng-model value }, function(v) { if (isValidNumber(v, CountryISO)) { // What do I do here? This doesn't work. v = formatE164(CountryISO, v); // This neither ngModel.$setViewValue(formatE164(CountryISO, v)); ngModel.$render(); //to updated the $modelValue of ngModel console.log("valid"); scope.valid = true; } else { console.log("invalid"); scope.valid = false; } }); }

$ watch在使用范围属性时不会观看模型

1 个答案: