Angular指令链接函数调用两次

Question

在我的角度应用程序中，指令在第一次访问期间正常工作，但是一旦访问了两次页面，所有指令链接函数也会被调用两次。假设我在页面A上，单击链接转到页面B然后再返回到页面A，页面A上的所有指令将执行它们的链接功能两次。如果我刷新浏览器，它将再次恢复正常。

以下是第二次访问时console.log将输出两次的示例。

  @app.directive 'testChart', ["SalesOrder", (SalesOrder) ->
    return {
      scope: {options: '='}
      link: (scope, elem, attrs) ->
        console.log("............checking")
        SalesOrder.chart_data (data) ->
          Morris.Line
            element: "dash-sales"
            data: data
            xkey: 'purchased_at'
            ykeys: ['total']
            labels: ['Series a']
    }
  ]

有什么想法吗？

更新

我的路线

when（“/ dash”，{     templateUrl：“＆lt;％= asset_path（'app / views / pages / dash.html'）％＆gt;”，     controller：DashCtrl   }）。

所以我的图表是重复的

Answer 1

同时确保您未在​​index.html TWICE 中加入指令！

Answer 2

我有同样的问题。 经过一段时间的挖掘后，我发现我没有使用正确的结束标签，导致图表被调用两次。

我有

<line-chart><line-chart>

而不是

<line-chart></line-chart>

Answer 3

每次将元素绑定到$ scope对象中的数据时，都会调用link（）函数。

请通过GET呼叫检查您是否多次提取数据。您可以通过Chrome调试器的“网络”选项卡监控资源提取。

指令配置HTML元素，然后在$ scope对象发生更改时随后更新该HTML。

link（）函数的一个更好的名称就是bind（）或render（），它表示只要指令需要将数据绑定到它或重新呈现它，就会调用此函数。 / p>

Answer 4

也许这会对某人有所帮助......

我遇到了指令transclude的问题，我使用了一个transclude函数，它添加了子元素，同时我在指令模板中忘了ng-transclude。子元素也是指令，它们的link函数被调用了两次！

花了一些时间在这个......

更多细节：

我有一个“主要”指令和“子”指令，想法是在另一个内部使用，类似的东西：

main
    child
    child

所以问题是{child}指令的link被调用了两次，我不明白为什么，

原来我在“主”指令模板中有ng-transclude（我发布它是因为它是PUG格式，对不起）：

md-card(layout-fill)
  md-card-content(flex)
    .map-base(id="{{::config.id}}", layout-fill)
      ng-transclude

以及“main”指令的link函数我调用了transclude函数：

link: function($scope, $element, $attrs, controller, transcludeFn) {
  $element.append(transcludeFn());
}

我想我只是尝试了不同的组合而忘了这一点，视觉上一切都很好，但link被调用了两次，代码运行了两次，逻辑被破坏了..

问题在于你不能同时拥有这两种方式，而你必须选择其中一种方式。

希望现在更清楚了。

Answer 5

在我的情况下，我有一个主导航和子导航，它们都通过其名称属性调用指令。由于第一个实例已经设置了第二个子导航所需的范围，因此不需要第二个调用。任何人都有类似的问题。