如何将变量从 $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}} 也没有显示任何内容。我的猜测是我的指令无法将 (receive/send) 信息传递给 DOM。不幸的是，我还没有找到让它工作的方法。我有 missed/misunderstood 东西吗？

Answer 1

首先，{{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);
}

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

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

html

javascript

jquery

angularjs

angular-directive