AngularJS - 針對所有指令實例的相同定時器

什麼是實現該指令的最佳「角度方法」，該指令將爲其所有實例共享一個定時器？AngularJS - 針對所有指令實例的相同定時器

例如我有一個指令「myComponent」，並且在頁面上出現很多次。組件內部存在一些閃爍一段時間的文本。

由於業務需求和性能方面的考慮，我希望會有單一的「超時」，一次切換所有實例的閃爍（文檔準備就緒後）。

我想到了寫指令的定義中的一些代碼：

//Pseudo code 
angular.module("app",[]).directive("myComponent", function($timeout){ 
    $(function() { $timeout(function(){ $(".blink").toggle(); }, 3000); }); 
    return { 
     //Directive definition 
    }; 
});

或使用某種服務，將接收$element和添加刪除類到它：

//Pseudo code 
angular.module("app",[]) 
.service("myService", function($timeout){ 
    var elements = []; 

    this.addForBlink = function(element) { elements.push(element) }; 

    $(function() { $timeout(function(){ $(elements).toggle(); }, 3000); }); 
}) 
.directive("myComponent", function(myService){ 

    return { 
     compile:function($element){ 
     myService.addForBlink($element); 
     return function() { 
      //link function 
     } 
     } 
    }; 
});

來源

2013-12-23 Alex Dn

在我意見最優雅和高效的將是結合這兩種方法，通過在指令初始化函數中指定指令的邏輯。這裏是什麼，我實際上意味着支架：

app.directive('blinking', function($timeout){ 

    var blinkingElements = []; 

    var showAll = function() { 
     for(var i = 0; i < blinkingElements.length; i++){ 
      blinkingElements[i].addClass("blinking"); 
     } 
    }; 

    var hideAll = function() { 
     for(var i = 0; i < blinkingElements.length; i++){ 
      blinkingElements[i].removeClass("blinking"); 
     } 
    }; 

    var blink = function() { 
     $timeout(showAll, 500); 
     $timeout(function(){ 
      hideAll(); 
      if (blinkingElements.length > 0) { 
       blink(); 
      } 
     }, 1000); 
    }; 

    return { 

     link : function(scope, element, attrs){ 

      blinkingElements.push(element); 
      if (blinkingElements.length == 1) { 
       blink(); 
      } 

      element.on("$destroy", function(){ 
       var index = blinkingElements.indexOf(element); 
       blinkingElements.splice(index, 1); 
      }); 

     } 
    } 
});

，這裏是工作demo。

而且可以注入一些service其將負責配置（設置間隔和/或類），也可以通過直接傳遞對象的屬性提供的配置。在後一種情況下，您可以爲不同的元素應用不同的類，但您應該考慮一些策略如何處理情況，而間隔設置不止一次。

來源

2013-12-23 15:13:15

AngularJS - 針對所有指令實例的相同定時器

回答

相關問題