angularjs: directive link function called twice

Question

I'm creating my first directive and I'm running into some strange behaviour. The console.log() in my link-function is called twice. I've googled for some solutions, but I don't see how I need to change my code to change the behaviour...

My index.html:

<html>
<head>
  <title>GCSE Directive TEST</title>
</head>
<body ng-app="gcseTest">

  <google-image-search query="Test query"></google-image-search>

  <!-- Scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
  <script src="gcse-directive.js"></script>
</body>
</html>

gcse-directive:

angular.module('gcseTest', [])
  .directive('googleImageSearch', [ function(){
      return {
        scope: {
          query: '@'
        },
        templateUrl: 'gcse-popup.html',
        restrict: 'E',
        replace: true,
        link: function ($scope, $element, $attrs) {
          $scope.search = function(){
            console.log("Gebruik query in link-functie: " + $scope.query);
            return "Gebruik query via popup: " + $scope.query;
          }
        }
      };
  }]);

gcse-popup.html:

<div>
  <h1>Directive Test</h1>
  {{search(query)}}
</div>

Can somebody explain what is going on here?

Pankaj Parkar · Accepted Answer · 2017-06-25 19:25:02Z

1

Your directive link function isn't getting called twice, its search function is getting called twice. The reason behind it is getting called twice as, you have used search function directly as in view bindings, so whenever digest cycle run your view binding gets evaluated. In this case digest cycle gets ran twice, that's why your search function ran twice and you can see console printed twice.

answered Jun 25, 2017 at 19:25

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

b_it_s Over a year ago

Thanks for your answer. Can you also explain to me what the best practice is to implement what I want to do (= show the result of a function in "link" directly in the view bindings)?

Pankaj Parkar Over a year ago

@bits can you explain your whole scenario? So that I can suggest correct way of doing it..

b_it_s Over a year ago

In my app, I want a button which opens a popup with results from google custom search engine (based on a value in the parent's controller. Once the user clicks on one of the results, the url is written to the parent's controller and shown in a textbox. The the popup must be reusable, so I wanted to put this in a directive. The button and textbox are in the directive's parent (unless you advise otherwise :)). In my code above, I'm only starting with my directive, so it does not (yet) do what I've described here:)

Collectives™ on Stack Overflow

angularjs: directive link function called twice

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related