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

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 时就会这样做。

我尝试将参数传递给scope因此使用双向绑定将其设置为 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 的计算结果为 true 时，它都会呈现此指令(更具体地说，此指令的新实例)。听起来你需要用你的ng-if来控制这一点。

你的例子：

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

相反，使用控制器中的逻辑有条件地呈现

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

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

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