javascript - 如何将变量从 $scope 传递到指令中，然后反向传递？

Question

我目前正在尝试实现一个应该使某些 DOM 元素闪烁的指令。为此，我使用 $timeout 将元素的可见性设置为可见或隐藏。我的问题是，如果在 $timeout 调用中我硬编码了一个值(比如“500”)，一切都会顺利进行。但是，如果我尝试通过变量传递此参数，我会发现元素闪烁得非常快，就好像没有输入任何参数一样(默认值为“0”)。

HTML

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

JS

.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
    };
});

此外，我忘了提及 HTML 中的 {{displayBlinkSpeed}} 也没有显示任何内容。 我的猜测是我的指令无法将信息传递(接收/发送)到 DOM。不幸的是，我还没有找到让它工作的方法。我错过/误解了什么吗？

Answer 1

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

至于 blinkSpeed - 当你绑定(bind)到一个属性时，Angular 规范化属性名称，所以 scope: {blinkSpeed: "=" 绑定(bind)到 blink-speed="500" 属性(不是 blinkSpeed="500" 属性)。没有它，$scope.blinkSpeed === undefined 和 parseInt(undefined) === NaN，这会导致闪烁。

将 HTML 更改为:

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

有点跑题了:

1:您不需要执行 parseInt(scope.blinkSpeed)，因为 "=" 会正确解析为整数。因此，以下方法同样有效:

$timeout(hideElement, $scope.blinkSpeed);

2:因为您不打算在指令中修改闪烁速度，所以使用 "=" 进行双向绑定(bind)是一种浪费 - 而不是使用使用 "&" 单向绑定(bind)到表达式:

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