Question

我正在尝试为input元素创建一个指令，该指令将动态创建ng-pattern以检查输入字段中的有效IP地址。我所有这样做的尝试都是完全不成功的。虽然我可以动态修改其他属性，但我无法创建会影响ng-pattern状态的$valid。

以下是我一直在处理的代码，它似乎应该有效，但它对ng-pattern没有任何作用。

app.directive('ipAddress', function($parse) {
    return {
        link: function(scope, element, attrs) {
            var model = $parse(attrs.ngPattern);
            model.assign(scope, "/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/");
            scope.$apply();
        };
});

指令：

<input ng-model="ip" ip-address required type="text" id="inputIP" placeholder="xxx.xxx.xxx.xxx">

是的，我知道我可以指定ng-pattern与<input>标签内联，但重点是我希望能够在代码中动态执行此操作，并且我想通过不在那里嵌入一堆正则表达式代码来保持<input>标签更清晰。

任何人都可以帮助我吗？谢谢！

Answer 1

您可以在控制器中定义模式，然后在html中使用：

$scope.pat=/^.*$/

然后在html中

<input ng-pattern="pat" ... >

Answer 2

虽然您希望在不使用ng-pattern的情况下获得答案，但我建议您不要使用指令，因为使用它不会比使用其他文件包含在您的代码中带来更多好处。

相反，我建议您使用常量使您的模式全局可用，以便其他表单也可以使用它，就像指令一样，但没有开销。

您可以声明一个常量：

app.constant('FORMATS', { "ipAdressRegex": /^your-regex-here)*$/i });

在控制器或服务中使用此常量：

var Controller = app.controller('Controller', ['$scope','FORMATS',
function ($scope,FORMATS) {

    $scope.ipAddressPattern = FORMATS.ipAdressRegex;
    .
    .
    .

在您看来：

<input class="form-control" type="text"
       id="input_ip" name="email" data-ng-model="user.ip_add"
       data-ng-pattern="ipAddressRegex" />

此外，如果您只想在视图中使用它，则可以在 $ rootScope 中添加常量，而不是在控制器中创建局部范围变量：

所以而不是

$scope.ipAddressPattern = FORMATS.ipAdressRegex;

您可以在 config.js

中进行操作

_.assign($rootScope, _.pick(FORMATS, 'ipAddressRegex'));

视图将保持原样

动态创建ng模式的指令

2 个答案: