Comment définir répété id de l'élément dans AngularJS?

J'aimerais faire quelque chose comme:

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

mais quand, dans le contrôleur, j'ai essayer:

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

getElementById renvoie la valeur null, alors comment pouvez identificateur de l'élément être défini en utilisant AngularJS variables?

Vous pouvez utiliser un filtre personnalisé, comme c'est fait dans le stackoverflow.com/questions/11873570/...
la gamme fonctionne très bien. Il est venu à partir de stackoverflow.com/questions/13685138/.... Ma question est sur la définition de l'identificateur de l'élément. Qui semble ne pas fonctionner.

OriginalL'auteur November Yankee | 2012-12-05

  1. 13

    La fonction SetterForCatanCtrl est exécuté qu'une seule fois, lorsque angulaire rencontre un ngController directive alors qu'il amorce votre application. Lorsque cela se produit, l'élément que vous souhaitez accéder à partir de la DOM n'existe pas encore.

    Faire de manipulation du DOM à partir d'un contrôleur n'est pas une bonne pratique, les directives sont peut résoudre le genre de problème auquel vous êtes confronté. Votre cas d'utilisation peut être résolu avec CSS et juste de commutation de classes, mais je suppose que vous voulez faire plus que juste mettre une image de fond.

    De manipulation du DOM à partir d'un contrôleur de

    Vous ne demandez pas pour des directives sur mesure, donc une solution rapide pourrait faire à l'aide de la ngClick directive et appeler une méthode qui permet de basculer l'affichage des images

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

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

    Donc quand on clique sur un bouton, vous obtiendrez un identifiant et l'utiliser pour obtenir un élément du DOM. Mais permettez-moi de répéter, pour ce cas d'utilisation d'une directive est un meilleur choix.

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

    pd: si vous chargez jQuery vous pouvez utiliser angular.element(<selector>) pour sélectionner les éléments du DOM.

    edit: ajout de la directive exemple

    De manipulation du DOM à partir d'une directive

    À l'aide d'une directive est plus simple, car vous pouvez simplement lier un événement à l'élément d'application de cette directive à

    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/

    Je suis allé avec ce que vous avez dans le jsfiddle. Merci.
    merci! votre réponse m'aide beaucoup! btw, où pourrais-je trouver de la doc de scope, element, attr dans la directive ? Et pourquoi ils sont sans $ ? quelle est la différence ? Je suis un newbie de AngularJS.
    href="http://devdocs.io/angular/ng.$compileprovider#methods_directive" >devdocs.io/angulaire/ng.$compileprovider#methods_directive

    OriginalL'auteur jaime