angularjs directive is not loading

Question

i tried to implement turn.js in angularjs app, when i click a link it takes to the page having that turn.js at that time my custom directive is not loading. If i press F5 then the custom directive is loading and turn.js is working propely.

My custom directive is like this

app.directive "turnJs", ->
  alert "loaded"
  restrict: "A"
  link: (scope, element, attrs) ->
    $(element).turn scope.$eval(attrs.turnJs)
    return

and my view is like this

<div class="butiknamncontainer" id="magazine" turn-js>
  <div>
    dfdssdfs
  </div>
  <div>
    sdffsdfsf
  </div>
</div>

is there any way to load the directive while doing that ng-click??

Answer 1

You need to include the directive definition one the first page of your app so that Angular knows what to do when it encounters the directive in your HTML.

The reason it works when you refresh is because Angular is being bootloaded along with the directive definition(Look at the hashtag in the URL).

Whereas when Angular is bootloaded without that file, such as when there is nothing in your hashtag, Angular has no idea what to do when it later encounters that directive. So, it gets ignored.