javascript innerHTML 正在返回文本而不是 html答案

【问题标题】：javascript innerHTML is returning text instead of htmljavascript innerHTML 正在返回文本而不是 html
【发布时间】：2015-12-01 19:07:02
【问题描述】：

我在 angularjS 中做一个应用程序，我有这个功能来删除 #(hashes) 并将它们组合成链接。

$scope.getAllHashes = function(event){

    var x = event;
    var collect = '';
    var link = '';

    for (i = 0; x.length > i; i++) { 

        //remove #
        link = x[i].substr(1);

        collect += "<a href='#/search/" + link + "'>" + x[i] + "</a> ";

    }
    return document.getElementsByClassName('hashes').innerHTML = collect;
};

它的返回文本：

<a href='#/search/aaa'>#aaa</a> <a href='#/search/bbb'>#bbb</a> <a href='#/search/cccc'>#cccc</a>

而不是链接：

#aaa #bbb #ccc

源来自这个数组：

$scope.events = 
[
    {

            id: 1,
            datetime: 'FRI, 6 NOV 10:00 AM',
            title: 'Event Title goes here - lalelalela',
            address: {
                road: '650 Address Rd',
                city: 'Toronto',
                state: 'Ontario',
                postal: 'A1B1C3',
                country: 'CA'
            },
            hashes: ['#aaa','#bbb','#cccc']

    }, .....

这是来自html源代码的代码

<span class="hashes ng-binding">
            &lt;a href='#/search/aaa'&gt;#aaa&lt;/a&gt; &lt;a href='#/search/bbb'&gt;#bbb&lt;/a&gt; &lt;a href='#/search/cccc'&gt;#cccc&lt;/a&gt; 
</span>

我不确定为什么它显示为文本而不是 html。

【问题讨论】：

我假设您使用 ng-bind 或 {{}} 来输出带角度的 html，对吗？只输出文本。如果要输出 html，则必须使用正确的指令。在控制器函数中更改元素的 innerHTML 也可能是个坏主意。您应该更新数据，或者直接在视图中输出函数的结果。
{{ getHashes({ data: eventObject.hashes }) }}
那么是的，你不能那样输出 html，只能输出字符串。 docs.angularjs.org/api/ng/directive/ngBindHtml
我只是调用函数。添加数据的是纯javascript。函数内。它在我使用 .class 的 #id instad 之前工作。有更好的方法可以确保做到这一点。但我想知道为什么它适用于 ID 而不是 CLASS
因为通过 id 你得到一个具有 innerHTML 属性的 DOM 节点，而通过类你得到一个没有的 DOM 节点集合innerHTML 属性。

标签： javascript angularjs text innerhtml

【解决方案1】：

对于 HTML，您需要使用 ng-bind-html

<p ng-bind-html="getHashes({ data: eventObject.hashes })"></p>

确保您包含对 ngSanitize 的依赖。请参阅文档https://docs.angularjs.org/api/ng/directive/ngBindHtml

【讨论】：

另外......不清楚你为什么这样做：return document.getElementsByClassName('hashes').innerHTML = collect;
拳头认为我想这样做 :D 我稍后会改变它。更好的方法
不工作顺便说一句。调用 ng-bind-html 中的函数 .. @mcgraphix