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。

第一次 - 一切正常。

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

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

此时，只有当调用链接函数时，它才会以某种方式记住之前的EXPANDED宽度。

例如：

<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，您的指令就会被重新呈现。这是应该在你的控制器中的逻辑。

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

1 个答案: