在angular中调用$compile绑定动态HTML后的ng-repeat问题

Question

我正在构建一个包含动态生成的HTML的多个选项卡的应用程序。点击一个选项卡会调用。net MVC控制器来呈现一个razor视图，将HTML返回给angular并显示在选项卡的主体中。

标签的主体需要绑定到底层的angular模型。我不确定这是否是最好的方法，但这是我到目前为止所做的，主要工作:

function updateHtml(html, tabId) {
        angular.element(document.getElementById('tabBodyContainer')).html(html);
        $scope.currentTab = tabId;
        var fnLink = $compile(document.getElementById('tabBodyContainer'));     // returns a Link function used to bind template to the scope
        fnLink($scope);
    }

这个工作很棒，除了当我点击一个标签有一个中继器。我的第一个选项卡有一个中继器，它在加载时渲染得很好，因为第一个选项卡是在页面加载时由razor视图引擎生成的，然后绑定。当我单击不同的选项卡并单击返回时，我的重复器中的所有行都丢失了，好像重复器没有绑定或DOM从未在$compile之后更新过该部分。

任何想法?还是有更好的方法?

谢谢!

Answer 1

我解决了这个问题-我缓存HTML，以便每个选项卡只调用我的MVC控制器一次。第一个标签的HTML是在angular绑定之后缓存的，这意味着标签1上添加的HTML是后编译的HTML。对于大多数html来说，这没问题，但对于重复器，angular会用之前的注释替换标记，这意味着如果我缓存html，它将不知道下次插入该html并运行$compile