将 AngularJS 指令附加到来自 jQuery.html() 的实时内容

Question

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

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

这会将项目添加到 table，标记如下

<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 没有检测到新的 table 内容，所以没有将指令附加到新项目。

我试过运气，但它不起作用

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

有人可以给我指明方向，让 angular 检查新项目并再次连接指令。

非常感谢

Answer 1

您需要在新 html

上使用 compile service

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

Answer 2

@Arun 他的解决方案有效，我还在 $compile 页面上找到了一些东西，这让我找到了一个基于文档的版本。

var table = angular.element(response.html);

table = $compile(table)($scope, function(table, $scope) {
  $('#directory-view').html(table);
});

然而上面的答案要简单得多:)

将 AngularJS 指令附加到来自 jQuery.html() 的实时内容

Attach AngularJS directives to live content from jQuery.html()

html

jquery

live

angularjs

angularjs-directive