$watch 使用范围属性时不监视模型

Question

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

CountryISO 是作为常量注入的依赖，并且包含 - 惊喜 - 用户的国家代码。指令中使用的函数来自 phoneformat.js

更新： 现在valid = 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

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

要更新ngModel 值，您可以使用ngModel 的$setViewValue 方法设置ngModel 的$viewValue，然后更新$modelValue 中的值，您需要在ngModel 上执行$render()。

继续阅读$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;
        }
    });
}