如何从$scope传递一个变量到一个指令，并反转

How to pass a variable from $scope into a directive, and reverse?

本文关键字：一个 指令 变量 scope      更新时间：2023-09-26

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

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

另外，我忘了提到，{{displayBlinkSpeed}}在HTML中也没有显示任何东西。我的猜测是，我的指令不能通信(接收/发送)信息到DOM。不幸的是，我还没有找到让它工作的方法。我错过/误解了什么吗?

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

至于blinkSpeed——当你绑定到一个属性时，Angular会规范化属性名，所以scope: {blinkSpeed: "="}被绑定到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:因为你不打算修改指令内的闪烁速度，所以使用"="进行双向绑定是浪费的-而是使用"&":

的单向绑定到表达式
scope: {
  blinkSpeed: "&",
},
link: function(scope){
  var speed = scope.blinkSpeed();
  $timeout(hideElement, speed);
}
相关文章：