Come impostare l'id elemento ripetuto in AngularJS?

Question

mi piacerebbe fare qualcosa di simile:

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

ma quando nel controller provo:

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

getElementById restituisce null così come può id di un elemento essere impostato utilizzando le variabili AngularJS?

Answer 1

La funzione SetterForCatanCtrl viene eseguita una sola volta, quando l'angolo incontra una direttiva ngController durante l'avvio della propria app. Quando ciò accade, l'elemento al quale si desidera accedere dal DOM non esiste ancora.

Fare La manipolazione del DOM da un controller non è una buona pratica, le direttive sono in grado di risolvere il tipo di problema che si sta affrontando. Il tuo caso d'uso può essere risolto con i CSS e semplicemente cambiando le classi, ma suppongo che tu voglia fare qualcosa di più della semplice impostazione di un'immagine di sfondo.

manipolazione

DOM da un controller

Non state chiedendo direttive personalizzati, quindi una soluzione rapida potrebbe fare usando la direttiva ngClick e chiamare un metodo che può commutare le immagini

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

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

Così, quando si fa clic su un pulsante, si ottiene un ID e lo si utilizza per ottenere un elemento dal DOM. Ma lasciatemelo ripetere, a questo caso d'uso una direttiva è una scelta migliore.

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

pd: se si carica jQuery è possibile utilizzare angular.element(<selector>) per selezionare gli elementi del DOM.

---

edit: l'aggiunta di esempio direttiva

manipolazione del DOM da una direttiva

Utilizzando una direttiva è più semplice, dal momento che si può solo associare un evento per l'elemento della direttiva viene applicata a

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/