如何在AngularJS中设置重复的元素id?
发布时间:2020-12-17 07:29:59 所属栏目:安全 来源:网络整理
导读:我想做的事情如下: div class='row' ng-repeat='row in _.range(0,12)' div id='{{row}}'/div/div 但是在控制器中我尝试: function SetterForCatanCtrl($scope) { $scope._ = _; try { var tile = document.getElementById('5'); tile.style.backgroundIma
我想做的事情如下:
<div class='row' ng-repeat='row in _.range(0,12)'> <div id='{{row}}'></div> </div> 但是在控制器中我尝试: function SetterForCatanCtrl($scope) { $scope._ = _; try { var tile = document.getElementById('5'); tile.style.backgroundImage = "url('aoeu.png')"; } catch (e) { alert(e) } } getElementById返回null,那么如何使用AngularJS变量设置元素的id?
函数SetterForCatanCtrl只运行一次,当angular在引导你的应用程序时遇到ngController指令.发生这种情况时,您要从DOM访问的元素尚不存在.
从控制器执行DOM操作不是一个好习惯,指令可以解决您所面临的问题.您的用例可以通过CSS解决,只需切换类,但我想您想做的不仅仅是设置背景图像. 来自控制器的DOM操作 您不是要求自定义指令,因此可以使用ngClick指令快速解决方案并调用可以切换图像的方法 示例HTML <div ng-controller='ctrl'> <div class='row' ng-repeat='row in _.range(0,12)'> <div id='{{row}}' ng-click="click($index)"> <button>{{row}}</button> </div> </div> </div> 和JS var App = angular.module('app',[]); App.run(function($rootScope) { $rootScope._ = _; }); App.controller('ctrl',function($scope){ $scope.click = function(idx){ var elem = document.getElementById(idx); console.log('clicked row',idx,elem); }; ?}); ? 因此,当单击一个按钮时,您将获得一个id并使用它来从DOM获取一个元素.但让我再说一遍,对于这个用例,指令是一个更好的选择. JSFiddle:http://jsfiddle.net/jaimem/3Cm2Y/ pd:如果加载jQuery,可以使用angular.element(< selector>)从DOM中选择元素. 编辑:添加指令示例 来自指令的DOM操作 使用指令更简单,因为您只需将事件绑定到应用该指令的元素即可 HTML <h1>Directive</h1> <div class='row' ng-repeat='row in _.range(0,12)'> <div id='{{row}}' my-directive> <button>{{row}}</button> </div> </div> JS App.directive('myDirective',function(){ return function(scope,element,attr){ element.bind('click',function(){ console.log('clicked element: ',element.html()); }); }; }); http://jsfiddle.net/jaimem/3Cm2Y/1/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |