Directive link function not called

Question

I have a portion of view that refreshes itself, say the div hides when an API call is in progress and shows up when the response is obtained.

This portion of view (div) has a angular directive.

View

<div ng-controller="myCtrl> <input type="button" ng-click="callAPI()"> <div ng-show="isAPICallComplete"> <p data-my-directive="something" ng-repeat="name in names">{{name}}</p> </div> </div>

Directive

angular.module('myModule') .controller('myCtrl', function ($scope, $http) { $scope.callAPI = function () { $http.get('someURL').then(function (response) { $scope.isAPICallComplete = true; $scope.names= response.names; }); } }) .directive('myDirective', function () { return { restrict: 'A', link: function (scope, element, attrs) { console.log('reached directive'); } } });

With the above code, on page load the API call is already complete and hence the div shows up which then invokes the angular directive and I could see the log in console. But when on other conditions the API is called, the div hides itself and shows up again. In this case, the angular directive is not invoked (I don't see the console log message).

"But when on other conditions the API is called, the div hides itself and shows up again" Post code for this. — dfsq
– dfsq, Commented Sep 22, 2015 at 8:56
shouldn't that be <p my-directive> since you defined the directive as myDirective? — Shivangi
– Shivangi, Commented Sep 22, 2015 at 9:23
@Shivi its an html5 representation of placing angular syntax, you can write data-ng- anything you want in angular — VizardCrawler
– VizardCrawler, Commented Sep 22, 2015 at 9:34

VizardCrawler · Accepted Answer · 2015-09-22 09:19:29Z

1

You can Do:

Just change the ng-show to ng-if it will work, As the DOM will be created again on using ng-if

edited Sep 22, 2015 at 9:19

answered Sep 22, 2015 at 9:00

VizardCrawler

1,30310 silver badges16 bronze badges

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

1 Comment

Dilip B S Over a year ago

Thank you. Changing to ng-if instead of ng-show helped me.

Abhishek Sarkar · Accepted Answer · 2015-09-22 10:22:33Z

Just thought it is worth mentioning

ng-if removes or adds the element to the DOM whereas ng-show only hides or shows the element using css properties.

Collectives™ on Stack Overflow

Directive link function not called

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related