如何将$ scope中的变量传递给指令并反转？

我目前正试图实施一个指令，应该让一些DOM元素闪烁。为此，我使用$timeout将元素的可见性设置为可见或隐藏。我的问题是，如果在$timeout调用中对某个值进行硬编码（例如'500'），则所有操作都可以顺利进行。但是，如果我试图通过一个变量传递这个参数，我会非常快速地闪烁元素，就像没有输入参数一样（默认值为'0'）。

HTML

<button class="btn btn-key"><span class="blink" blinkSpeed='500'>Q</span></button> 
{{displayBlinkSpeed}}

.directive('blink',function($timeout){ 
return{ 
    restrict:'ACE', 
    transclude: true, 
    scope:{ 
     blinkSpeed: '=' 
    }, 
    link: function(scope,element,attrs){ 
     function showElement(){    
      var speed = parseInt(scope.blinkSpeed); 
      element.css("visibility","visible"); 
      $timeout(hideElement,speed); 
      scope.displayBlinkSpeed = speed; 
     } 

     function hideElement(){ 
      var speed = parseInt(scope.blinkSpeed); 
      element.css("visibility","hidden"); 
      $timeout(showElement,speed); 
      scope.displayBlinkSpeed = speed; 
     } 

     showElement(); 
    }, 
    template: '<span ng-transclude></span>', 
    replace: true 
    }; 
});

另外，我忘了提及，{{displayBlinkSpeed}}在HTML没有显示任何东西。我的猜测是我的指令无法与DOM通信（接收/发送）信息。不幸的是，我还没有找到使其工作的方法。我错过了/误解了什么吗？

来源

2015-09-01 Yann Lelong

首先，{{displayBlinkSpeed}}不会显示任何内容，因为displayBlinkSpeed只在指令的隔离范围内定义 - 它在undefined之外。

至于blinkSpeed - 当你绑定到一个属性，角度规范了属性名称，所以scope: {blinkSpeed: "="}势必blink-speed="500"属性（不blinkSpeed="500"属性）。没有它，$scope.blinkSpeed === undefined和parseInt(undefined) === NaN，导致闪烁。

更改HTML到：

<span class="blink" blink-speed='500'>Q</span>

有点偏离主题：

1：你不需要做因为"="将正确解析为整数。因此，下面将工作一样好：

$timeout(hideElement, $scope.blinkSpeed);

2：，因为你不打算在指令中修改闪烁速度，这是浪费的做双向与"="结合 - 而使用单向与"&"表达式结合：

scope: { 
    blinkSpeed: "&", 
}, 
link: function(scope){ 
    var speed = scope.blinkSpeed(); 
    $timeout(hideElement, speed); 
}

来源

2015-09-01 23:18:30

如何将$ scope中的变量传递给指令并反转？

回答

相关问题