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

时间:2016-04-10 17:12:36

标签: javascript html angularjs

类似的问题
  1. Angularjs: ng-bind-html & ng-repeat
  2. Angular ng-bind-html inside a nested ng-repeat
  3. Ng-Bind-Html inside ng-repeat
  4. 我有这个工作的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> 
    

    我得到了这个我无法弄清楚的错误 enter image description here

    另外,我发现许多人建议使用$ sce.trustAsHtml(),但在我的情况下,我的ng-bind-html在尝试使用ng-repeat之前与ngSanitize完美配合,所以我真的要使用它解决了我的问题?

    更新

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

    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()函数应该可以解决问题。

2 个答案:

答案 0 :(得分:0)

ng-bind-html接受表达。所以它应该像ng-bind-html="modal.html"。否{{}}

答案 1 :(得分:0)

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

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()函数应该可以解决问题。