如何將$ 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中的變量傳遞給指令並反轉？

回答

相關問題