如何在 AngularJS 中设置重复的元素 ID? [英] How to set repeated element id in AngularJS?

问题描述

我想做类似的事情:

<div id='{{row}}'></div>

但是在控制器中时我尝试:

function SetterForCatanCtrl($scope) {$scope._ = _;尝试 {var tile = document.getElementById('5');tile.style.backgroundImage = "url('aoeu.png')";}赶上(e){警报(e)}}

getElementById 返回 null 那么如何使用 AngularJS 变量设置元素的 id?

解决方案

SetterForCatanCtrl 函数只运行一次，当 angular 在引导你的应用程序时遇到一个 ngController 指令.发生这种情况时，您要从 DOM 访问的元素尚不存在.

从控制器进行 DOM 操作不是一个好习惯，指令可以解决您面临的问题.您的用例可以通过 CSS 和切换类来解决，但我想您想要做的不仅仅是设置背景图像.

来自控制器的 DOM 操作

您不需要自定义指令，因此可以使用 ngClick 指令完成快速解决方案并调用可以切换图像的方法

示例 HTML

<div class='row' ng-repeat='row in _.range(0,12)'><div id='{{row}}' ng-click="click($index)"><button>{{row}}</button>

和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('点击行', idx, elem);};});

所以当一个按钮被点击时，你会得到一个 id 并用它来从 DOM 中获取一个元素.但让我重复一遍，对于这个用例，指令是更好的选择.

JSFiddle:http://jsfiddle.net/jaimem/3Cm2Y/

pd:如果你加载 jQuery，你可以使用 angular.element() 从 DOM 中选择元素.

<小时>

添加指令示例

来自指令的 DOM 操作

使用指令更简单，因为您只需将事件绑定到应用指令的元素

HTML

指令
<div class='row' ng-repeat='row in _.range(0,12)'><div id='{{row}}' 我的指令><button>{{row}}</button>

JS

App.directive('myDirective', function(){返回函数(范围，元素，属性){element.bind('点击', function(){console.log('点击元素:', element, element.html());});};});

http://jsfiddle.net/jaimem/3Cm2Y/1/

I'd like to do something like:

<div class='row' ng-repeat='row in _.range(0,12)'>
    <div id='{{row}}'></div>
</div>

but when in the controller I try:

function SetterForCatanCtrl($scope) {
    $scope._ = _;
    try {
        var tile = document.getElementById('5');
        tile.style.backgroundImage = "url('aoeu.png')";
    } catch (e) {
        alert(e)
    }
}

getElementById returns null so how can an element's id be set using AngularJS variables?

解决方案

The function SetterForCatanCtrl is run only once, when angular encounters a ngController directive while it bootstraps your app. When this happens the element you want to access from the DOM doesn't exist yet.

Doing DOM manipulation from a controller is not a good practice, directives are can solve the kind of problem you are facing. Your use case can be solved with CSS and just switching classes but I guess you want to do more than just setting a background image.

DOM manipulation from a controller

You are not asking for custom directives, so a quick solution could done using the ngClick directive and call a method that can switch images

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

And 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);   
    };
​});    ​

So when a button is clicked you will get an id and use it to get an element from the DOM. But let me repeat, a for this use case a directive is a better choice.

JSFiddle: http://jsfiddle.net/jaimem/3Cm2Y/

pd: if you load jQuery you can use angular.element(<selector>) to select elements from the DOM.

---

edit: adding directive example

DOM manipulation from a directive

Using a directive is simpler, since you can just bind an event to the element the directive is applied to

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, element.html());
        });
    };
});

http://jsfiddle.net/jaimem/3Cm2Y/1/

这篇关于如何在 AngularJS 中设置重复的元素 ID?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！