Search code examples
angularjstimeline.js

ng-click not executing when built as a string in link function

I'm using Timeline JS to build a timeline. In the timeline there are elements, I want the elements to be click-able.

In my directive link function I build the click able element content like so: 

var stringToBeAdded = '<a ng-click="setPage(2)" href="javascript:void(0)">March 10, 2015</a>'

However, after the string is added to the DOM, it does execute the setPage() function within my controller when clicked. The scope is correct.

Solution

  • You need to use the $compile service.

    https://docs.angularjs.org/api/ng/service/$compile

    Like this:

    var stringToBeAdded = $compile('<a ng-click="setPage(2)" href="javascript:void(0)">March 10, 2015</a>')($scope);

    Look here for more information:

    Insert an angular js template string inside an element