javascript - How make ui-sref work dynamically via element.append? -

javascript - How make ui-sref work dynamically via element.append? -

i trying create pagination directive. when total_for_pagination populated, proper html pagination created.

my html: max = max per page

<pagination data-number="{{ total_for_pagination }}" data-max="50"></pagination>

my directive:

link: function(scope, element, attrs){ scope.$watch(function(){return attrs.number;}, function(){ //need watch because there query db know how many elements page. var page_element = '<ul>'; for(var = 0; i*attrs.max<attrs.number; i+=1){ page_element += '<li class="pagination"><a ui-sref="users({start: '+i*attrs.max+', end: '+((i*attrs.max)+(attrs.max-1))+'})">'+i+'</a></li>'; } page_element += '</ul>'; element.append(page_element); }); }

what happening when inspect html they should ui-sref note changing state when click on it. when place same code, works fine.

what doing wrong? thanks!

what need here, utilize angular js core feature: $compile. see in action in this working example. line trick: $compile(element.contents())(scope);

that directive definition:

.directive("mydirective", function($compile){ homecoming { restrict: 'a', link: function(scope, element, attrs){ scope.$watch(function(){return attrs.number;}, function(){ var page_element = '<ul>' +'<li><a ui-sref="home">ui-sref="home"</a></li>' +'<li><a ui-sref="other">ui-sref="other"</a></li>' + '</ul>'; element.append(page_element); $compile(element.contents())(scope); }); } } })

which these states:

.state('home', { url: "/home", templateurl: 'tpl.html', }) .state('other', { url: "/other", templateurl: 'tpl.html', })

will need. check here. see bit related: form validation , fields added $compile

javascript angularjs angular-ui-router