为什么在编译包含指令的 html 文本（来自数据库）时出现无限摘要错误

Question

我有一个控制器（比如 SampleController），它从 $http 服务获取数据（如下 html 文本）并将其分配给 $scope.htmlText

<p>This is some content text
     <span class='sampleClassDirective' pid='1'>P1 Value</span> 
     some other text 
     <span class='sampleClassDirective' pid='2'>P2 Value</span> 
some more text </p>

我想在视图中呈现此 html 文本。由于它是 html 文本，我可以使用 ng-html-bind 指令按原样呈现 html-文本。
但我想编译 html 文本，以便 html 文本中的指令可以获得它们的模板（如果有的话）
实际问题从这里开始
如您所见，上面的内容有一些带有 class="sampleClassDirective"
我有一个名为 "sampleClassDirective"

此指令在其模板中使用 ui.bootstrap 弹出框组件

angular.module('app').dirctive('sampleClassDirective', 
    function(){
       return {
           restrict:'C',
           transclude:true,
           template:'<span uib-popover="This is pid">'+
                       '<ng-transclude></ng-transclude>'+
                    '</span>'
       }
    });

现在，我想编译我在 sampleController 中得到的整个 htmlText，这样 "sampleClassDirective" 和 "uib-popover" 都会被编译。

所以鉴于我给了

<div id='htmlContent' ng-bind-html='render()'></div>

在示例控制器中

$scope.render = function(){
    var elm = angular.element(htmlText);
    // compiling each directive
    var classDirectives = $(elm).find(".sampleClassDirective");
    for(var i=0, iMax=classDirectives.length; i<iMax; i++){
        $(elm).find(".sampleClassDirective")[i].append($compile(classDirectives[i])($scope));
    }
    // or can we compile all htmlText at once?
    // elm = $compile(elm)($scope)

    return $sce.trustAsHtml($(elm).html());
}

**问题：**
在编译过程中，为什么我会收到 $rootScope infinite $digest 错误并且正在中止？

Answer 1

虽然你不这样做

$('#htmlContent').html(htmlText)
$compile($('#htmlContent'))($scope)

Answer 2

将执行的函数放在 angular 指令上通常会影响摘要循环。我会尝试将渲染的输出放在不同的变量上并将其添加到 ng-bind html，例如

$scope.renderedOutput = $scope.render();
<div id='htmlContent' ng-bind-html='renderedOutput'></div>

为什么在编译包含指令的 html 文本（来自数据库）时出现无限摘要错误

Why infinite digest error while compiling html text (from db) which contains a directive

html

javascript

twitter-bootstrap

angularjs

angular-directive