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

Posted 2023-02-22

【中文标题】如何将变量从 $scope 传递到指令中并反转？

【英文标题】：How to pass a variable from $scope into a directive, and reverse?

【发布时间】：2015-11-27 07:34:29

【问题描述】：

我目前正在尝试实现一个应该使一些 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 通信（接收/发送）信息。不幸的是，我还没有找到让它工作的方法。我错过/误解了什么吗？

【参考方案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);