Wie wiederhole ich Element-ID in AngularJS?

Question

Ich möchte wie etwas tun:

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

aber wenn in der Steuerung Ich versuche:

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

getElementById gibt null zurück, so wie kann ein ids Element eingestellt werden AngularJS Variablen?

Answer 1

Die Funktion SetterForCatanCtrl wird nur einmal ausgeführt, wenn angular eine ngController Anweisung trifft, während sie Ihre App bootstrappt. In diesem Fall existiert das Element, auf das Sie vom DOM zugreifen möchten, noch nicht.

Doing DOM Manipulation von einem Controller ist keine gute Praxis, Direktiven können die Art von Problem lösen, die Sie konfrontiert sind. Ihr Anwendungsfall kann mit CSS gelöst werden und nur Klassen wechseln, aber ich denke, Sie möchten mehr als nur ein Hintergrundbild setzen.

DOM-Manipulation von einem Controller

Sie nicht für benutzerdefinierte Richtlinien fordern, so dass eine schnelle Lösung könnte die ngClick Richtlinie erfolgt mit und eine Methode aufrufen, die

Bilder

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

wechseln

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

Also, wenn Wenn Sie auf eine Schaltfläche klicken, erhalten Sie eine ID und verwenden diese, um ein Element aus dem DOM zu erhalten. Aber lassen Sie mich wiederholen, eine Richtlinie für diesen Anwendungsfall ist eine bessere Wahl.

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

pd: wenn Sie jQuery laden Sie angular.element(<selector>) verwenden können Elemente aus dem DOM zu wählen.

---

bearbeiten: Hinzufügen Direktive Beispiel

DOM-Manipulation aus einer Richtlinie

eine Richtlinie zu verwenden ist einfacher, da Sie nur ein Ereignis an das Element binden kann, die Richtlinie auf

angewendet wird

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/