Question

我正在尝试从指令中动态添加和删除“ng-pattern”属性。这是我的指示：

ap.directive('myDirective', ['$compile', function ($compile) {
    return {
        scope: { test: "=myDirective" },
        link: function ($scope, element, attrs) {
            $scope.$watch('test', function () {
                if (someCondition) {
                    element.removeAttr("ng-pattern");
                } else {
                    element.attr("ng-pattern", "/^([0-9]{5})$|^([0-9]{9})$/");
                }
            });
        }
    };
}]);

来自html的输入标记：

<form name="myform" novalidate>
    <input name="test" required class="form-control" ng-model="myModel" my-    directive="someValueFromScope"/>
</form>

如果我检查Chrome开发工具中的DOM元素，则会将“ng-pattern”属性添加到输入标记中，但不会添加验证类（ng-invalid-pattern或ng-valid-pattern）。如果我直接从html添加“ng-pattern”，一切都按预期工作。

Answer 1

使用$ compile和$ set，如： -

attrs.$set("ng-pattern", "/^([0-9]{5})$|^([0-9]{9})$/");
$compile(element)($scope);

Answer 2

而不是$ watch使用$ observe方法

attrs.$observe('test', function () {
      //do something
});

Answer 3

我终于弄明白了，编译父范围就行了。

$compile(element)($scope.$parent)

动态添加ng-pattern，缺少验证类

3 个答案: