AngularJS：ng-click后无法设置元素的innerHTML答案

【问题标题】：AngularJS: can't set innerHTML of element after ng-clickAngularJS：ng-click后无法设置元素的innerHTML
【发布时间】：2015-10-07 09:18:50
【问题描述】：

我有以下 HTML：

<div class="custom-select">
    <div class="custom-select-placeholder">
        <span id="placeholder-pages">Show all posts</span> 
    </div>
    <ul class="custom-select-list animate-show no-padding no-margin" >
        <li ng-click="selectItem($event)">Show all posts</li>
        <li ng-click="selectItem($event)">Events</li>
        <li ng-click="selectItem($event)">Files</li>
        <li ng-click="selectItem($event)">Pictures</li>
        <li ng-click="selectItem($event)">Thoughts</li>
    </ul>
</div>

当我点击一个“li”项目时，我需要获取它的 innerHTML 并将其 id 为“placeholder-pages”的 span 的 innerHTML 设置为获取的值。

为此，我在控制器中编写了以下函数：

$scope.selectItem = function(evt) {
        var selected = evt.target.innerHTML; //working
        var placeholder = document.getElementById('placeholder-pages'); //working
        placeholder.innerHTML = selected; //not working
}

在函数中，我可以获取选定的“li”的 innerHTML 以及“占位符页面”的 div。但我无法设置 div 的 innerHTML。我没有收到任何错误。什么都没有发生。

【问题讨论】：

希望我能提供更多帮助，但如果您正在使用 Angular，您不应该需要 innerHTML - 您让自己的事情变得比您需要的更难
是的，其实我是用ng-bind解决的，但是很好奇为什么上面的代码不起作用。

标签： javascript html angularjs innerhtml

【解决方案1】：

我使用 ng-bind 解决了这个问题。

HTML：

<div class="custom-select-placeholder">
    <span id="placeholder-pages" ng-bind="selected_option"></span> //set html using ng-bind
</div>

控制器：

$scope.selected_option = 'Show all posts';

$scope.selectItem = function(evt) {
        var selected = evt.target.innerHTML; 
        $scope.selected_option = selected;
}

我猜这是@Simon 建议的更“有角度”的做事方式。

【讨论】：

【解决方案2】：

正如 Simon 已经说过的，你应该使用 ng-bind 来代替。根据经验，所有 DOM 访问和操作都属于 directive 链接函数。

顺便说一句。您的代码运行良好：http://plnkr.co/edit/PB5P2dhDD836mkssVlOo?p=preview

【讨论】：

是的，我用 ng-bind 代替。另外，我不知道为什么它在我的代码中不起作用。 ://

【解决方案3】：

您的代码运行良好。在 Chrome (v45) 、 FF (v39) 甚至 IE9 中检查它 - 一切正常（Angular 版本是 1.3.14），占位符正确接收 innerHTML 数据并显示它。

【讨论】：