Add a directive to Angular-xeditable input field

Question

Hello I am implementing edit-in place functionality with Angular-xeditable

I need to be able to add a directive to the input field that pops up dynamically when wanting to edit a value.

In this case it is the simple text-field of angular-xeditable which I want to add the directive to.

This is my directive:

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

Template for text input types(but meant to accept only integers with the directive):

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

On the click of this link what is generated dynamically(seen with the code inspector) as html is:

<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">

Now how can I make my directive affect this input?

Qi Tang · Accepted Answer · 2015-07-09 22:32:12Z

3

You can use e-* attributes in your anchor element.

Here is an example here

BTW, your code is not working correctly. There is an infinite loop because $setViewValue will invoke $parsers and then your $parsers function will in turn call $setViewValue again. I changed your code a little bit. And it works fine now.

edited Jul 9, 2015 at 22:32

answered Jul 9, 2015 at 22:20

Qi Tang

1,2657 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Add a directive to Angular-xeditable input field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related