Angularjs directive not work to added by javascript

Question

I want to normally work my directive When I add this element by click event.

I checked that the originally declared code works as expected.

This html element is added by javascript function when be called some click event

<input type="text" reg="'^[-+]?([0-9]|[0-8][0-9]|9[0])$'" reg-check>

Here is my directive code

TEST.directive('regCheck', function(){
    return {
        restrict : 'A',
        scope: {
            reg : '='
        },
        link : function(scope, element, attrs){
            var regEx = new RegExp(scope.reg);
            var previousValue;
            console.log(regEx);
            $(element).on('keyup' ,function(){
                var dInput = element[0].value
                console.log(dInput);
                if(regEx.test(dInput) || dInput =='' || dInput =='-') previousValue = dInput
                else element[0].value = previousValue
            });
        }
    }
})

I think that this problem works cause by jquery event not rendered to added element. So I try to

$(document).on('keyup', element ,function(){
     var dInput = element[0].value
     console.log(dInput);
     if(regEx.test(dInput) || dInput =='' || dInput =='-') previousValue = dInput
     else element[0].value = previousValue
});

It's not work too. What should I do?

that element code shown by ng-bind-html

임종식
– 임종식

2018-07-23 06:58:58 +00:00
Commented Jul 23, 2018 at 6:58 — 임종식
– 임종식, Commented Jul 23, 2018 at 6:58

KMims · Accepted Answer · 2018-07-23 07:19:39Z

1

I think you are unable to have your directive fire on the keyup event?

$ is not defined. Simple mod gets you going:

app.directive('regCheck', function(){
  return {
    restrict : 'A',
    require: 'ngModel',
    scope: {
        reg : '='
    },
    link : function(scope, element, attrs, ngModel){
        var regEx = new RegExp(scope.reg);
        var previousValue;
        console.log(regEx);
        element.on('keyup' ,(ngModel) => {
            console.log('value', ngModel.target.value);
            var dInput = element[0].value
            console.log(dInput);
            if(regEx.test(dInput) || dInput =='' || dInput =='-') previousValue = dInput
            else element[0].value = previousValue
        });
    }
  }
})

And add a ng-model to your input and the value of the input is output to the console on every keyUp event.

<input type="text" ng-model="inputValue" reg-check reg="'^[-+]?([0-9]|[0-8][0-9]|9[0])$'">

Note: I did not check the logic of the directive or regEx as I dont think that was the question.

answered Jul 23, 2018 at 7:19

KMims

1847 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

임종식 Over a year ago

I solved problem. the problem is that after added elements by javascript are not checked by $complie So angular can't check that element. Thank you for your helping. I referenced this

Collectives™ on Stack Overflow

Angularjs directive not work to added by javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related