使用手势服务时，Angular指令不触发ng-blur

Question

I'm trying to create a directive that reveals a popup bubble when you tap and hold on the element. When I use the on-hold directive everything seems to work, but when I use the ionicGesture service I am unable to attach focus to revealed element. Here is my code that works using the on-hold directive:

app.directive("copyContent", function ($rootScope, $compile, $document, $timeout) {
    return {
        link: function ($scope, $element, $attr) {
            var popup = "<div class='copy-popup' ng-show='copying'><input type='button' value='Copy'  ng-click='copyItem()' ng-blur='removePopup()' class='button button-dark'></div>";
            var el = $compile( popup )( $scope );
            $element.append( el );
            $scope.$watch('copying', function(newValue, oldValue) {
                $timeout(function () {
                    if (newValue){
                        $element.addClass('copy-select');
                        el.find('input').focus();
                    }
                });
            });
            $scope.removePopup = function(){
                $scope.copying = false;
                $element.removeClass('copy-select');
            };
            $scope.copyItem = function () {
                var copyString = $attr.copyContent;
                console.log(copyString);
                if(cordova.plugins){
                    cordova.plugins.clipboard.copy(copyString);
                }
                $scope.removePopup();
            };
        }
    };
});

and the html:

<div ng-repeat="comment in comments track by $index" class="message-wrapper">
<div class="chat-bubble right"  copy-content="{{comment}}" on-hold="copying = true"></div>
</div>

The unexpected behavior occurs when I try removing the on-hold directive from the html and instead try using the ionicGesture service within the copy-content directive, here is the code that doesn't work using the ionicGesture on hold service:

app.directive("copyContent", function ($rootScope, $compile, $document, $timeout, $ionicGesture) {
    return {
        link: function ($scope, $element, $attr) {
            var popup = "<div class='copy-popup' ng-show='copying'><input type='button' value='Copy'  ng-click='copyItem()' ng-blur='removePopup()' class='button button-dark'></div>";
            var el = $compile( popup )( $scope );
            $element.append( el );
            $scope.removePopup = function(){
                console.log('blur');
                $scope.copying = false;
                $element.removeClass('copy-select');
            };
            $scope.copyItem = function () {
                var copyString = $attr.copyContent;
                if(cordova.plugins){
                    cordova.plugins.clipboard.copy(copyString);
                }
               $scope.removePopup();
            };
            $ionicGesture.on("hold", function(){
                $scope.copying = true;
                $timeout(function () {
                    console.log('focus');
                    $element.addClass('copy-select');
                    el.find('input').focus();
                });
            }, $element);
        }
    };
});

and the html:

<div ng-repeat="comment in comments track by $index" class="message-wrapper">
<div class="chat-bubble right"  copy-content="{{comment}}"></div>
</div>

The popup seems to show correctly, but the removePopup function on ng-blur is not fired when clicking outside of the input type=button. Why would using the ionicGesture service cause ng-blur to not be fired correctly, and using the on-hold directive work?

Answer 1

The listener functions attached via

$ionicGesture.on

execute outside of Angular's context and don't trigger the digest loop, which means the watcher won't see any changes.

If you add

$scope.$apply();

inside the hold function you will notice that the watcher will start seeing the changes.