AngularJS中UI Bootstrap与$sce.trustAsHtml()结合失效问题求助

问题原因 #

ng-bind-html仅负责将经过$sce信任的HTML插入DOM，但不会触发Angular的编译流程。你通过API获取的HTML中的uib-accordion-group等ui.bootstrap指令，不会被Angular解析并执行对应的指令逻辑，因此无法渲染成预期的组件。而直接写在页面中的代码会在Angular初始化阶段被自动编译，所以能正常显示。

解决办法 #

自定义一个指令，利用Angular的$compile服务手动编译动态插入的HTML，触发指令解析。

1. 实现自定义编译指令 #

在你的Angular模块中添加以下指令：

angular.module('你的应用模块名').directive('compileHtml', ['$compile', function($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            // 监听绑定的HTML内容变化
            scope.$watch(attrs.compileHtml, function(newHtml) {
                if (newHtml) {
                    // 清空元素并插入新HTML
                    element.html(newHtml);
                    // 编译元素内容并链接到当前作用域
                    $compile(element.contents())(scope);
                }
            });
        }
    };
}]);

2. 修改页面模板 #

将原来的ng-bind-html替换为自定义指令：

<uib-accordion close-others="false">
    <div compile-html="docHtml"></div>
</uib-accordion>

3. 保留控制器逻辑 #

控制器中$sce.trustAsHtml的逻辑不需要修改，确保HTML内容被Angular信任：

FsDao.readDoc().then(
    function (d) {
        $scope.docHtml = $sce.trustAsHtml(d.html);
    },
    function (error) {
        MainUtil.growl(Msg.DATA_ERROR, "danger");
    }
);

注意事项 #

• 确保你的应用模块已经依赖了ui.bootstrap，否则动态HTML中的指令无法被识别
• 动态HTML中使用的作用域变量（如doc.open）必须存在于当前控制器的作用域中，否则绑定会失效
• 频繁更新动态HTML会触发多次编译，注意控制更新频率以避免性能问题

内容的提问来源于stack exchange，提问作者akrelj