Directive to dynamically create an ng-pattern

问题

I'm trying to create a directive for an input element that will dynamically create an ng-pattern to check for a valid IP address in the input field. All of my attempts to do so have been completely unsuccessful. While I can dynamically modify other attributes, I can't create an ng-pattern that will affect the $valid status.

Here's the code that I've been working on which seems like it should work, but it doesn't do anything to the 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();
        };
});

Directive:

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

Yes, I know I can just specify the ng-pattern inline with the <input> tag but the point is that I want to be able to do this dynamically in the code, and I'd like to keep the <input> tag cleaner by not embedding a bunch of regex code there.

Can anyone please help me? Thanks!

回答1:

You can define pattern in controller and then use in html:

$scope.pat=/^.*$/

And then in html

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

回答2:

Although you would like an answer without the use of ng-pattern but I would suggest you not use a directive for that as using it would not add much benefits over the use of another file to include in your code.

Rather I would suggest you use constants to make your pattern globally available so other forms can use it too, like a directive but without the overhead.

You can declare a constant like:

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

And use this constant in your controller or service :

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

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

In your view :

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

Also further if you only want to use it in your views you can instead add the constant in your $rootScope instead of creating a local scope variable in the controller:

So instead of

$scope.ipAddressPattern = FORMATS.ipAdressRegex;

You can do in your config.js

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

View will remain as before

来源：https://stackoverflow.com/questions/17384909/directive-to-dynamically-create-an-ng-pattern

标签

dynamic

angularjs

directive