向 Angular-xeditable 输入字段添加指令

Question

实现就地编辑功能

我需要能够在想要编辑值时动态弹出的输入字段中添加指令。

在这种情况下，我想将指令添加到 angular-xeditable 的简单文本字段。

这是我的指令：

app.directive('limitInt', function () {

return {
    restrict: 'A',
    require: '?ngModel',

    link: function (scope, element, attrs, ngModel) {
        if (!ngModel) return;
        ngModel.$parsers.unshift(function (inputValue) {
            //dots and are not allowed in order to avoid legal numbers that are floats
            inputValue = inputValue.replace(/\./g,'');
            inputValue = inputValue.replace(/\e/gi,'');

            if(isNaN(inputValue)){
              ngModel.$setValidity('onlyFlo2', false);
            } else{ 

              //if scientific notation wit ...e-12 then round to closest integer 
              //inputValue= Math.round(inputValue);
              ngModel.$setValidity('onlyFlo2', true);
            }



            ngModel.$setViewValue(inputValue);
            ngModel.$render();
            return inputValue;
        });
    }
};});

文本输入类型的模板（但意味着只接受带有指令的整数）：

<a href="#" editable-text="v">{{ v }}</a>

点击此 link 动态生成的内容（通过代码检查器查看）如 html 是：

<input type="text" class="editable-has-buttons editable-input form-control ng-pristine ng-valid ng-touched" typeahead="x for x in typeListTemp | filter:$viewValue | limitTo:5" ng-model="$data" aria-autocomplete="list" aria-expanded="false" aria-owns="typeahead-5614-9594">

现在如何让我的指令影响这个输入？

Answer 1

您可以使用 e-* attributes in 您的锚元素。

这是一个例子here

顺便说一句，您的代码无法正常工作。存在无限循环，因为 $setViewValue 将调用 $parsers，然后您的 $parsers 函数将再次调用 $setViewValue。我稍微更改了您的代码。现在它工作正常。

向 Angular-xeditable 输入字段添加指令

Add a directive to Angular-xeditable input field

javascript

angularjs

x-editable

angular-directive