AngularJS: 无法在 ng-click 后设置元素的 innerHTML

Question

我有以下 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' 项时，我需要获取其内部 HTML 并将其 ID 为 'placeholder-pages' 的范围的内部 HTML 设置为获取的值。

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

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

在函数中，我能够获得 'li' 的内部 HTML 和 'placeholder-pages' div。但是我无法设置 div 的内部 HTML。我没有收到任何错误。没有任何反应。

Answer 1

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

Answer 2

我使用 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 建议的一种更 'Angular' 的做事方式。

Answer 3

正如 Simon 所说，您应该改用 ng-bind。根据经验，所有 DOM 访问和操作都属于 directive link 函数。

顺便说一句。您的代码工作正常：http://plnkr.co/edit/PB5P2dhDD836mkssVlOo?p=preview

AngularJS: 无法在 ng-click 后设置元素的 innerHTML

AngularJS: can't set innerHTML of element after ng-click

html

javascript

innerhtml

angularjs