Question

当我点击并按住元素时，我试图创建一个显示弹出气泡的指令。当我使用on-hold指令时，一切似乎都有效，但是当我使用ionicGesture服务时，我无法将焦点附加到显示元素。这是我使用on-hold指令工作的代码：

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

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

当我尝试从html中删除on-hold指令而不是尝试在copy-content指令中使用ionicGesture服务时，会发生意外行为，这里是使用ionicGesture on hold服务不起作用的代码：

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

和html：

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

弹出窗口似乎显示正确，但在输入type =按钮外单击时不会触发ng-blur上的removePopup函数。为什么使用ionicGesture服务会导致ng-blur无法正确触发，并使用on-hold指令工作？

Answer 1

通过

附加的侦听器功能

$ ionicGesture.on

在Angular的上下文之外执行，并且不会触发摘要循环，这意味着观察者不会看到任何变化。

如果你添加

$ $范围应用（）;

在保持功能中，您会注意到观察者将开始看到这些变化。

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

1 个答案: