Search code examples
javascriptangularjsfrontendangular-xeditable

AngularJS angular-xeditable stop cancel event


I use angular-xeditable v0.9.0 lib in a project.

I click editable-text field and show editable form. It's ok. But after I click anywhere, the editable form will hide. I need the form to remain active after clicking. How I can do this ?

html

<a
    href
    editable-text="item.desc"
    class="has-text-weight-medium"
    ng-if="auth.is('user')"
>
    {{item.desc}}
</a>

js

app.controller('TestCtrl', function($scope) {
  $scope.item = {
    desc: 'desc'
  };  
});

I try create directive and for stop event, but not work

app.directive('editableWithClickOutside', function($document) {
    return {
        link: function(scope, element) {
            $document.on('mouseup', function(event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    }
});

and I try use oncancel attribute but in my a customCancel method event field is undefined (

<a
    href
    editable-text="item.desc"
    oncancel="customCancel($event)"
    class="has-text-weight-medium"
    ng-if="auth.is('user')"
>
    {{item.desc}}
</a>

Solution

  • I solved this problem like this

    app.run([
      'editableOptions',
      function (editableOptions) {
        'use strict';
        editableOptions.blurElem = 'ignore';
      },
    ]);