如何將角度指令（如ng-dblclick）注入到所有指定的HTML元素？

Question

我想有一個全局處理程序，用於從按鈕發生的所有ng-dblclick，並且輸入type =「submit」。我如何通過在app.init.js文件中指定並注入它來實現此行爲？

謝謝

Answer 1

使用角度指令趕上點擊或dbclick事件

app.directive("ngdblclick", ['$compile', function($compile){ 
'use strict' 
return{ 
    compile : function(elements, attributes){ 
     return{ 
      restrict: 'C', 
      post : function(scope, element, attribute){ 
       var isSingleClick = true; 
       element.bind('click', function(){ 
        setTimeout(function(){ 
         if(isSingleClick){ 
          console.log("It's a single click"); 
          return; 
         } 
        }, 500); 
       }); 

       element.bind('dblclick', function(){ 
        console.log("It's a double click"); 
        isSingleClick = false; 
        setTimeout(function(){ 
         isSingleClick = true; 
         return; 
        }, 500); 
       }); 
      } 
     }; 
    } 
}; 
}]); 

Answer 2

你想要的是一個自定義的指令，將提取它的所有子元素（在這種情況下buttons和input型提交）並將ng-dblclick指令添加到它們中：

請看下面的示例：

例子＃1：

angular.module('myApp', []) 
 
    .controller('MyController', MyController) 
 
    .directive('globalDblClick', globalDblClickDirective); 
 

 
function MyController($scope) { 
 
    $scope.times = 0; 
 
    $scope.globalDblClick = function() { 
 
    $scope.times++; 
 
    }; 
 
} 
 

 
function globalDblClickDirective($compile) { 
 
    return { 
 
    restrict: 'A', 
 
    scope: { 
 
     globalDblClick: '&' 
 
    }, 
 
    link: function(scope, elem, attr) { 
 

 
     elem.find('button').each(function(index, btnElem) { 
 
     btnElem = angular.element(btnElem); 
 
     btnElem.attr('ng-dblclick', attr.globalDblClick); 
 
     $compile(btnElem)(scope); 
 
     }); 
 

 
     elem.find('input[type="submit"]').each(function(index, inpElem) { 
 
     inpElem = angular.element(inpElem); 
 
     inpElem.attr('ng-dblclick', attr.globalDblClick); 
 
     $compile(inpElem)(scope); 
 
     }); 
 
    } 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="MyController"> 
 

 
    <section global-dbl-click="globalDblClick()"> 
 

 
    <button>Click Me Twice</button> 
 

 
    <input type="submit" value="Double Click Me" /> 
 

 
    <input type="text" value="Won't work here" /> 
 

 
    <div> DoubledClicked: {{times}} times </div> 
 

 
    </section> 
 

 
</div>

如果你想手動添加;您可以編寫自定義指令，您可以使用該指令代替ng-dblclick，並且在內部它將添加ng-dblclick指令，如果類型爲button或input類型提交。
注意：下面的示例僅僅是爲了演示上述概念，您不會使用它，因爲您可以直接使用ng-dblclick。

檢查下面的例子：

angular.module('myApp', []) 
 
    .controller('MyController', MyController) 
 
    .directive('globalDblClick', globalDblClickDirective); 
 

 
function MyController($scope) { 
 
    $scope.times = 0; 
 
    $scope.globalDblClick = function() { 
 
    $scope.times++; 
 
    }; 
 
} 
 

 
function globalDblClickDirective($compile) { 
 
    return { 
 
    priority: 1001, // compiles first 
 
    terminal: true, // prevent lower priority directives to compile after it 
 
    restrict: 'A', 
 
    scope: { 
 
     globalDblClick: '&' 
 
    }, 
 
    compile: function(tElement, tAttrs) { 
 

 
     if (tElement.is('button') || tElement.is('input[type="submit"]')) { 
 
     tElement.removeAttr('global-dbl-click'); // to avoid infinite compile loop 
 

 
     tElement.attr('ng-dblclick', tAttrs.globalDblClick); 
 
     var linkFn = $compile(tElement); 
 

 
     return function(scope) { 
 
      linkFn(scope); 
 
     }; 
 
     } 
 
    } 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="MyController"> 
 

 
    <button class="dblClick" global-dbl-click="globalDblClick()">Click Me Twice</button> 
 

 
    <input type="submit" class="dblClick" global-dbl-click="globalDblClick()" value="Double Click Me" /> 
 

 
    <span> DoubledClicked: {{times}} times </span> 
 

 
</div>