AngularJS - 所有指令实例的相同计时器答案

【问题标题】：AngularJS - same timer for all directive instancesAngularJS - 所有指令实例的相同计时器
【发布时间】：2013-12-23 14:50:06
【问题描述】：

什么是实现指令的最佳“Angular 方式”，该指令将为所有 it 实例提供一个共享计时器？

例如，我有一个指令“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
        }
      }
   };
});

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

在我看来，最优雅和最有效的方法是通过在指令初始化函数中指定指令的逻辑来结合这两种方法。这是我真正意思的一个脚手架：

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 来负责配置（设置间隔和/或类），或者您可以通过将对象直接传递给属性来提供配置。在后一种情况下，您可以为不同的元素应用不同的类，但您应该考虑一些策略如何处理这种情况，当间隔设置不止一次时。

【讨论】：