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”项时，我需要获取其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以及'placeholder-pages'div。但我无法设置div的innerHTML。我没有收到任何错误。没有任何事情发生。

Answer 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;
}

我想这是一个更具角色的角色＆＃39;按照@Simon的建议做事。

Answer 2

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

Answer 3

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

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

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

3 个答案: