AngularJS：不能設置元素的innerHTML的後NG-點擊

我有以下HTML：AngularJS：不能設置元素的innerHTML的後NG-點擊

<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>

當我點擊一個「禮」的項目，我需要獲取它的innerHTML，並設置的innerHTML該跨度的id爲'placeholder-pages'，取值爲取值。

爲此，我在我的控制器寫了如下的功能：

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

在我能夠得到「禮」的innerHTML功能選擇，也是「佔位符，網頁的股利。但我無法設置div的innerHTML。我沒有收到任何錯誤。什麼都沒發生。

來源

2015-10-07 Tarun Dugar

希望我可以幫助更多，但你不應該需要innerHTML，如果你正在處理角度 - 你正在讓你的自己難以比你需要 –

是的，實際上我用ng解決了它綁定，但我很好奇爲什麼上面的代碼不起作用。 –

我使用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的建議做事情的更多的 '角' 的方式。

來源

2015-10-07 09:36:31