[英]AngularJS: can't set innerHTML of element after ng-click
我有以下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。 我没有任何错误。 什么都没发生。
我通过使用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建议的一种更“角度化”的处理方式。
您的代码工作正常。 在Chrome(v45),FF(v39)甚至IE9中进行了检查-一切正常(Angular版本为1.3.14),占位符正确接收了innerHTML数据并显示了它。
正如Simon所说,您应该改用ng-bind。 根据经验,所有DOM访问和操作都属于directive
链接功能。
顺便说一句。 您的代码可以正常工作: http : //plnkr.co/edit/PB5P2dhDD836mkssVlOo?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.