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”項時，我需要獲取其innerHTML並將ID為“ placeholder-pages”的跨度的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;
}

我想這是@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