如何在AngularJS中設置重複的元素ID？

Question

我想這樣做：

<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怎麼能一個元素的ID使用AngularJS變量設置？

Answer 1

功能SetterForCatanCtrl只運行一次，如果遇到角一個ngController指令，而它自舉你的應用程序。發生這種情況時，您想要從DOM訪問的元素尚不存在。

做從控制器的DOM操作不是一個好的做法，指令是可以解決你面臨的問題的種類。你的用例可以用CSS解決，只需要切換類，但我想你不僅僅需要設置背景圖像。

從控制器

你是不是要求定製指令，所以一個快速的解決方案可以使用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> 

的方法

DOM操作

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

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