从JSON对象中提取时不呈现角度指令

Question

我正在尝试构建一个从Wordpress CMS中提取内容的前端。到目前为止，我已成功使用WP REST API插件从我的Wordpress实例中提取JSON数据，并使用＆＃39; ng-bind-html＆＃39;来显示HTML内容。

但是，当我尝试在此代码中显示AngularJS指令或表达式时，它似乎不起作用。

这是我的JSON对象的片段。标准HTML标记渲染正常，AngularUI选项卡指令之间的实际内容也可以呈现。无法正确渲染它，所以拍了一张截图。

有什么建议吗？

Answer 1

正如@charlietfl在他的评论中提到的那样，ng-bind-html只能以安全的方式处理HTML内容，这就是文档所说的内容：

  

评估表达式并将生成的HTML插入到   元素以安全的方式。默认情况下，生成的HTML内容将   使用$ sanitize服务进行消毒

您需要为您的需要实现自定义指令，以便您的响应中包含的HTML内容也将使用$compile服务进行编译。这看起来像这样：

app.directive('bindHtmlCompile', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return scope.$eval(attrs.bindHtmlCompile);
            }, function (value) {
                element.html(value);
                $compile(element.contents())(scope);
            });
        }
    };
}]);

代码的灵感来自GitHub上的angular-bind-html-compile项目。

Answer 2

感谢帮助人员，实际上就像LordTribual分享他的建议一样找到了答案。

此处链接 - How to make ng-bind-html compile angularjs code