2

我正在尝试为一个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>通过不在那里嵌入一堆正则表达式代码来保持标签更干净.

谁能帮帮我吗？谢谢！

4

2 回答 2

9

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

$scope.pat=/^.*$/

然后在html中

<input ng-pattern="pat" ... >
于 2013-07-03T22:45:39.280 回答
1

尽管您想要一个不使用 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'));

视图将保持不变

于 2014-07-22T10:05:30.120 回答