Angular directive link function called twice

Question

In my angular app, directives are working fine during the first visit, but once a page been visited twice, all the directive link function gets called twice too. Say I am on page A, click a link to go to page B and then back to page A, all directives on page A will execute the their link function twice. if I refresh the browser it will become normal again.

Here is an example where the console.log will output twice when the second visit.

  @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']
    }
  ]

Any idea?

Update

My Route

when("/dash", { templateUrl: "<%= asset_path('app/views/pages/dash.html') %>", controller: DashCtrl }).

so my chart is duplicated

Solution 1

also make sure you are not including your directive in your index.html TWICE!

Solution 2

I had this exact same problem. After a loooooong time digging around I found that I hadn't used the correct closing tag which resulted in the chart being called twice.

I had

<line-chart><line-chart>

instead of

<line-chart></line-chart>

Solution 3

The link() function is called every time the element is to be bound to data in the $scope object.

Please check if you are fetching data multiple times , via GET call. You can monitor the resource fetching via Network tab , of chrome debugger.

A directive configures an HTML element and then updates that HTML subsequently whenever the $scope object changes.

A better name for the link() function would have been something like bind() or render(), which signals that this function is called whenever the directive needs to bind data to it, or to re-render it.

Comments

[solarnz]

This answer can not be upvoted enough. If you're using chrome and have two script tags, it will only make the request once, but run the code twice. Do not get fooled like I did. Check your html.

[Christoffer Bubach]

Oh, snap... I can't believe this shit. After trying all types of e.stopPropagation(); and nothing helped, this was it for me! Even stranger though, e.stopPropagation(); actually worked - but only if the anonymous event function did not include param e which gives (correctly) a console error instead..... TGIF.

[Laurence]

Ouch, I just got caught out by this one too. Somehow an old version of the directive was cached and was calling alongside the current one. Thanks for saving me another half hour of debugging and furiously scratching my head.

[BSMP]

I forgot ng-transclude in directive template - Was adding it enough to fix it? It's not entirely clear from your answers. For the record: This question was sent to the Low Quality Posts queue, which means someone thought that this didn't answer the question. Please edit your post to make it clearer what your solution was.