繁体   English   中英

ng-repeat内的角度ng-bind-html

[英]angular ng-bind-html inside ng-repeat

与类似的问题

  1. Angular.js:ng-bind-html和ng-repeat
  2. 嵌套ng-repeat内的角ng-bind-html
  3. ng-repeat中的Ng-Bind-Html

我有这个工作的HTML代码

<div class="modal modal-wide fade" id="indexHTML" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">index.html</h4>
            </div>
            <div class="modal-body">

            <pre><code class="language-markup" ng-bind-html="indexHTML"></pre></code>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

由于我需要多次使用此代码,因此我决定使用ng-repeat而不是复制粘贴。

<repeat ng-repeat="modal in modals">

    <div class="modal modal-wide fade" id="{{modal.id}}" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">{{modal.fileName}}</h4>
                </div>
                <div class="modal-body">

                <pre><code class="language-markup" ng-bind-html="{{modal.id}}"></pre></code>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</repeat> 

我收到了我无法弄清楚的错误 在此处输入图片说明

此外,我发现很多人建议使用$ sce.trustAsHtml(),但就我而言,在尝试使用ng-repeat之前,我的ng-bind-html与ngSanitize完美配合,所以我真的使用它来解决我的问题?

更新资料

我不知道为什么,但是当我不使用ng-repeat时,我需要在控制器中手动将“ <”替换为“ <”

function getSourceCode(object, property, url) {
    $http.get(url).then(function(response) {
        object[property] = response.data.replace(/</g,"&lt;");
    }).catch(console.error.apply(console));
}

但是,当我更改代码以使用ng-repeat时,将ng-bind-html更改为ng-bind并在控制器中删除.replace()函数应该可以解决问题。

ng-bind-html一个表达式。 因此它应该类似于ng-bind-html="modal.html" {{}}

我不知道为什么,但是当我不使用ng-repeat时,我需要在控制器中手动将“ <”替换为“ <”

function getSourceCode(object, property, url) {
    $http.get(url).then(function(response) {
        object[property] = response.data.replace(/</g,"&lt;");
    }).catch(console.error.apply(console));
}

但是,当我更改代码以使用ng-repeat时,将ng-bind-html更改为ng-bind并在控制器中删除.replace()函数应该可以解决问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM