在Angular JS Directive中编译HTML

Question

我正在尝试为简单的模态窗口构建以下指令，其用法如下：

<modal content="<div class='error-text'>this is the content</div>"></modal>

哪个应生成以下标记：

<div class="modal-wrap fade-hide fade-show" ng-show="showModal" ng-click="showModal=false">
    <div class="modal-info clearfix" ng-click="$event.stopPropagation()">

        <div class='error-text'>this is the content</div>

        <button class="btn form-control" ng-click="showModal=false">OK</button>
    </div>
</div>

到目前为止，这是我的指示：

.directive('modal', function($compile){
    return {
        restrict: 'AE',
        replace: true,
        link: function(scope, element, attrs) {
            scope.content = attrs.content;
        },
        template: '<div class="modal-wrap fade-hide fade-show" ng-show="showModal" ng-click="showModal=false"><div class="modal-info clearfix" ng-click="$event.stopPropagation()">{{content}}<button class="btn form-control" ng-click="showModal=false">OK</button></div></div>',
    };
})

我遇到的问题是{{content}}没有被编译。它被渲染为文字html。

我的模态窗口如下所示：

如何配置我的指令，使content属性编译为HTML？

Answer 1

  

在这个示例中，我使用了bootstrap作为我们的模态。

     

请记住：在指令中您可以使用范围而不是 Attr 它会更好。

     

用于在您的指令或任何地方绑定Html使用 ng-bind-html 作为此示例

<强>的index.html

messagesList.setOnScrollListener(new AbsListView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

        if(firstVisibleItem+visibleItemCount == totalItemCount && totalItemCount!=0) {
            if(!flag_loading) {
                flag_loading = true;
                loadNextChatItems();
            }
        }
    }
});

<强> modal.html

<modal content="<div class='alert alert-danger'>this is the content</div>"></modal>

过滤

  

此过滤器可帮助您将html绑定为信任代码，我们在 ng-bind-html 属性的 modal.html 中使用它。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body" ng-bind-html="content | trust">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

<强>指令

app.filter("trust", ['$sce', function ($sce) {
    return function (htmlCode) {
        return $sce.trustAsHtml(htmlCode);
    }
}]);