Angularjs 指令无法由 javascript 添加

Question

当我通过点击事件添加这个元素时，我想正常工作我的指令。

我检查了最初声明的代码是否按预期工作。

这个html元素是在调用某些点击事件时由javascript函数添加的

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

这是我的指令代码

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
            });
        }
    }
})

我认为这个问题是由于 jquery 事件没有呈现给添加的元素造成的。所以我尝试

$(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
});

这也行不通。我该怎么办？

Answer 1

我认为您无法在 keyup 事件上触发指令？

$ 未定义。简单 mod 让你继续：

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
        });
    }
  }
})

并在您的输入中添加一个 ng-model，输入的值会在每次 keyUp 事件时输出到控制台。

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

注意：我没有检查指令或正则表达式的逻辑，因为我认为这不是问题所在。

Angularjs 指令无法由 javascript 添加

Angularjs directive not work to added by javascript

javascript

directive

angularjs

angularjs-directive