CODEWITHSUNDEEP
angularjsangularjs-directiveangular-uiangular-ui-bootstrap
kliron
kliron

Reputation: 4673

Angular-UI tooltip messes with keypress event?

I 'm using the following directive to listen to enter keypresses on an input element:

.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });

                event.preventDefault();
            }
        });
    };
})

This works as expected. When I add a tooltip directive on the input element the above directive no longer works. Is there a workaround for this?

UPDATE

After bingjie2680's suggestion I tried to use ng-keypress and ng-keydown but stumbled upon another problem. The above directives seem to affect the ng-model directive of the same element. The model becomes undefined. Here is the input tag:

<input type="text" placeholder="tags" 
       tooltip="tooltip text here"
       tooltip-placeent="top"
       tooltip-trigger="focus"
       ng-model="currentTag" ng-keydown="addTag($event)" />

And here is the relevant part of addTag:

    $scope.addTag = function($event) {
        if ($event.keyCode !== 13) return;

        console.log($scope.currentTag);     <-- currentTag is undefined here
        ...
    }

Why is the model getting undefined? Everything works fine if I don't include the tooltip directive.

Upvotes: 0

Views: 1061

Answers (1)

kliron
kliron

Reputation: 4673

To make this more specific to the real issue at hand I posted here. It was 'the dot' scoping issue. More about this here

Upvotes: 1

Related Questions