Question

我的应用程序中有一个带有一个文本输入的多用途模态对话框。有时我只需要任何文本，有时我想限制文本以匹配正则表达式模式。

我尝试使用jQuery attr添加正则表达式：

$("#popupTextInput").attr("ng-pattern", "/.*imdb\.com\/title\/.*/");

不起作用。当我检查渲染的元素时，元素上会出现正确的ng-pattern指令，但formname.$valid始终为真，无论我输入什么。

当我手动添加属性（在firebug中具有完全相同的外观）时，它按预期工作。

而不是带有模式的字符串我也尝试将正则表达式模式直接添加到属性中，如下所示：

var regexp = /.*imdb\.com\/title\/.*/;
$("#popupTextInput").attr("ng-pattern", regexp);

但这也不起作用。

我很困惑。任何人都可以对此有所了解吗？我应该提一下，在我创建模态之前添加属性。

ETA：做了一些进一步的实验我在默认情况下尝试在输入上使用ng-pattern，并在不需要时删除。类似的事发生了：当我删除ng-pattern时，它会从元素中删除（至少检查没有显示），但正则表达式仍然有效。我尝试了$ scope。$ apply下面的建议（在$ apply中有和没有函数）但它没有效果。

Answer 1

~~使用jQuery后立即尝试使用$scope.$apply();。~~

$scope.$apply( function() { $("#popupTextInput").attr("ng-pattern", "/.*imdb\.com\/title\/.*/"); });

它会导致绑定更新并可能解决问题。

~~要了解详情，请查看Stack Overflow question on what $apply does和Jim Hoskin's article on $apply~~

阅读this

之后

我认为正确的方法是。

parent = $("#popupTextInput").parent();
var newInput = $("#popupTextInput").clone();
$("#popupTextInput").remove();
newInput.attr("ng-pattern", "/.*imdb\.com\/title\/.*/");
var compiledElement = $compile(newInput)($scope);
parent.append(compiledElement);

如何动态地将ng-pattern属性添加到html元素？

1 个答案: