Attach AngularJS directives to live content from jQuery.html() -
i've run issue i've dismay had use update view via jqueries .html function, looks like
$('#directory-view').html( response.html );
this adds items table, markup follows
<tr data-marked="0" id="file-49" data-id="49" data-folder="0" data-readonly="0"> <td width="30"> <span class="action file"></span> </td> <td class="filename"> readme.txt </td> <td width="200" class="uk-text-center"> text/plain </td> <td width="200" class="uk-text-center"> <span data-uk-tooltip title="15/05/2015 11:17:53">8 minutes ago</span> </td> <td width="100" class="uk-text-center"> owen </td> </tr>
then i've got angularjs directive follows
app.directive('marked', function(){ return { restrict: 'a', link: function($scope, element, attrs){ /* toggle marked state of table row */ element.on('click', function(e){ var marked = element.attr("data-marked") == "1" ? "0" : "1"; element.attr("data-marked", marked); $(document).trigger('marked'); }); /* if url contains file-34 automatically scroll , mark selected */ if( window.location.hash && element.attr('data-marked') == "0" ){ $(window.location.hash).trigger('click'); } } }; });
however issue i'm having is, angular isn't detecting new table content isnt attaching directive new items.
i tried luck isn't working
$scope.$apply(function(){ $('#directory-view').html( response.html ); });
could point me in direction make angular check new items , hookup directives again please.
many thanks
you need use compile service on new html
var element = $compile(response.html)($scope); $('#directory-view').html(element);
Comments
Post a Comment