How to get angular directive to execute each time a view is accessed without refreshing the page

Question

I have created a custom directive that wraps a jquery function which transforms html into a a place where users can enter tags (similar to SO tagging functionality).

Here's my directive code:

App.directive('ngTagItWrapper', function ($resource, rootUrl) {
$("#myTags").tagit({
    allowSpaces: true,
    minLength: 2,
    tagSource: function (search, showChoices) {
        $.ajax({
            url: rootUrl + "/api/Tag?searchTerm=" + search.term,
            data: search,
            success: function (choices) {
                choices = $.map(choices, function (val, i) {
                    return val.Name;
                })
                showChoices(choices);
            }
        });
    }
});
return {}
});

When I first navigate to the view containing the directive, the directive fires which transforms the ul html element into what I need. However, if I click onto another part of the site and then click back to the part of the site that contains the tag entry screen, the directive never fires and the html is not transformed into a nice place where I can enter tags.

Here's the view code:

<p>Hint: <input ng-model="knowledgeBit.Hint" /></p>
<p>Content: <input ng-model="knowledgeBit.Content"/></p>

<ul id="myTags" ng-tag-it-wrapper>
</ul>

<button ng-click="saveKnowledgeBit()">Save</button>

If I refresh the page, the directive fires and I get the tag entry area. So basically angular doesn't know to fire the directive again unless I completely reload the site. Any ideas?

Ilan Frumer · Accepted Answer · 2014-02-05 22:23:23Z

2

A directive constructor only run once and then $compile caches the returned definition object.

What you need is to put your code inside a linking function:

App.directive('ngTagItWrapper', function ($resource, rootUrl) {
  return {
    link: function(scope, elm){
      elm.tagit({
          allowSpaces: true,
          minLength: 2,
          tagSource: function (search, showChoices) {
              $.ajax({
                  url: rootUrl + "/api/Tag?searchTerm=" + search.term,
                  data: search,
                  success: function (choices) {
                      choices = $.map(choices, function (val, i) {
                          return val.Name;
                      })
                      showChoices(choices);
                  }
              });
          }
      });
    }
  }
});

edited Feb 5, 2014 at 22:23

answered Feb 5, 2014 at 22:17

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

2 Comments

izikandrw Over a year ago

Thanks Ilan! noob note--"elm" in the code above refers to the html element you want to transform, for my purposes I used jquery to select it `$("#myTags").tagit()

Ilan Frumer Over a year ago

you put the directive on the same element, you already have a reference to it's jquery wrapper, check if elm === $("#myTags") , If not then you need to place jquery's script before angular's script.

Collectives™ on Stack Overflow

How to get angular directive to execute each time a view is accessed without refreshing the page

1 Answer 1

What you need is to put your code inside a linking function:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

What you need is to put your code inside a linking function:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related