如何使指令链接函数只运行一次 [英] How to make a directive link function to run only once

问题描述

  function myDirective（）{
 return {
 scope ：{}，
 restrict：'A'，
 link：function（$ scope，element）{
 console.warn（my directive）; 
} 
 }; 
} 
 
 angular.module（'myapp'）。指令（'myDirective'，myDirective）; 
  

我在使用伪指令的html标签上使用 ng-if
我想创建链接这里只运行一次。但它会在每次触发ng-if时执行。

我尝试将参数传递给范围然后使用双向绑定将它设置为false，如下所示：

  function myDirective（）{
 return {
 scope：{
 shouldRun：=
} 
 restrict：'A'，
 link：function（$ scope，element）{ 
 $ scope.shouldRun = false 
 console.warn（我的目录ective）; 
} 
}; 
} 
 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的超时时间 - 它可以正常工作。但它看起来不太好。

解决方案

这是预期的行为。每次ng-if计算结果为true时，它将呈现此指令（更具体地说，是该指令的新实例）。听起来你需要用ng-if来控制它。

你的例子：

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

相反，在您的控制器中使用逻辑以

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

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

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

I have a directive in angular:

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

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

And I use ng-if on the html tag that uses the directive. I want to make the link here run only once. But it does every other time the ng-if is triggered.

I trying passing an argument to the scopeAnd so use the two way binding to set it to false, like this:

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

And on the element itslef use: <div my-directive shouldRun="true"></div> But it does not wark.

Could anyone help please?

Thank you!

Edit:

I will try to be more clear: I have a div, with ng-if directive on it. Inside, I have yet another directive. this directive, expands the width of the element on which it is defined. I click a button to trigger the ng-if.

First time - everything works fine.

I click the button again - element is gone.

Another click - element being rendered again.

Only, this time, when the link function is called, it somehow REMEMBERS the previous EXPANDED width.

For example:

<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);
}

first print would be 100; Second time the directive is being created it STARTS by being 110! and that is what I get in the console.

Yes, if I use timeout of 0 - it works fine. But it does not look fine.

解决方案

This is expected behavior. Every time your ng-if evaluates to true, it will render this directive (more specifically, a new instance of this directive). It sounds like you need to control this with your ng-if.

You example:

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

Instead, use logic in your controller to conditionally render with

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

Since you are having trouble with ng-if, you probably need to add other conditions like

Note that whenever ng-if evaluates to false and then to true again, your directive will be rerendered. This is logic that should be in your controller.

这篇关于如何使指令链接函数只运行一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！