如何使指令链接函数只运行一次

Question

我有一个角度指令：

function myDirective() {
    return {
        scope: {},
        restrict: 'A',
        link: function($scope, element) {
          console.warn("my directive);
        }
    };
}

angular.module('myapp').directive('myDirective', myDirective);

我在使用该指令的 html 标记上使用 ng-if。 我想让这里的链接只运行一次。但每隔一次触发 ng-if 时它就会这样做。

我尝试将参数传递给scopeAnd 所以使用双向绑定将其设置为false，如下所示：

function myDirective() {
    return {
        scope: {
            shouldRun: "="
        }
        restrict: 'A',
        link: function($scope, element) {
          $scope.shouldRun = false
          console.warn("my directive);
        }
    };
}
angular.module('myapp').directive('myDirective', myDirective);

在元素本身上使用：<div my-directive shouldRun="true"></div> 但它不工作。

有人可以帮忙吗？

谢谢！

编辑：

我会尽量说得更清楚： 我有一个 div，上面有 ng-if 指令。在里面，我还有另一个指令。该指令扩展了定义它的元素的宽度。 我点击一个按钮来触发 ng-if。

第一次 - 一切正常。

我再次单击按钮 - 元素消失了。

另一个点击 - 元素再次被渲染。

只是，这一次，当调用链接函数时，它会以某种方式记住先前的扩展宽度。

例如：

<div ng-if="vm.myCondition">
  <div my-directive style="width:100px;"></div>
</div>

link: function(scope, elem) {
    console.warn($(elem).width());
    $(elem).width($(elem).width() * 1.1);
}

第一次打印是 100； 第二次创建指令时，它从 110 开始！这就是我在控制台中得到的。

是的，如果我使用 0 超时 - 它工作正常。但是看起来不太好。

Answer 1

这是预期的行为。每次你的 ng-if 计算结果为真时，它都会渲染这个指令（更具体地说，这个指令的一个新实例）。听起来你需要用你的 ng-if 来控制它。

你的例子：

<div my-directive shouldRun="true"></div>

相反，使用控制器中的逻辑来有条件地渲染

<div my-directive ng-if="..."></div>

由于您在使用 ng-if 时遇到问题，您可能需要添加其他条件，例如

请注意，每当 ng-if 评估为 false 然后再次为 true 时，您的指令将被重新呈现。这是应该在您的控制器中的逻辑。