作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想做类似的事情:
<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 访问的元素还不存在。
做从 Controller 操作 DOM 不是一个好习惯 , 指令可以解决您所面临的问题。你的用例可以通过 CSS 和切换类来解决,但我想你想做的不仅仅是设置背景图像。
来自 Controller 的 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>
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);
};
});
angular.element(<selector>)
从 DOM 中选择元素。
<h1>Directive</h1>
<div class='row' ng-repeat='row in _.range(0,12)'>
<div id='{{row}}' my-directive>
<button>{{row}}</button>
</div>
</div>
App.directive('myDirective', function(){
return function(scope, element, attr){
element.bind('click', function(){
console.log('clicked element: ', element, element.html());
});
};
});
关于angularjs - 如何在 AngularJS 中设置重复的元素 id?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13718215/
我是一名优秀的程序员,十分优秀!