jquery - 将 AngularJS 指令附加到 jQuery.html() 中的实时内容

Question

我遇到了一个问题，令我非常沮丧的是，我不得不使用通过 jQueries .html 函数更新 View ，所以实际上看起来像


$('#directory-view').html(response.html);


这会将项目添加到表格中，标记如下

<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>

然后我的 AngularJS 指令如下

App.directive('marked', function(){
    return {
        restrict: 'A',
        link: function($scope, element, attrs){

            /* Toggle the marked state of a 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 the url contains a file-34 it will
            automatically scroll to it and mark it as selected */
            if( window.location.hash && element.attr('data-marked') == "0" ){
                $(window.location.hash).trigger('click');
            }
        }
    };
});

但是我遇到的问题是， Angular 没有检测新的表格内容，因此没有将指令附加到新项目。

我尝试了一下运气，但没有成功

$scope.$apply(function(){
    $('#directory-view').html( response.html );
});

有人可以指出我对新项目进行 Angular 检查并再次连接指令的方向吗？

非常感谢

Answer 1

您将需要使用compile service在新的 html 上

var element = $compile(response.html)($scope);
$('#directory-view').html(element);