get element by Id und addClass in angularjs

m versuchen, ein element anhand seiner Id in angularJs und fügen Sie eine Klasse, um es. Benutzt habe ich "ng-attr-id" " zuweisen von id zu meinem element und jetzt m nicht in der Lage, addClass, um es.

html:

<div ng-attr-id= {{id}} >Text</div>
<button ng-click="action">action</button>

Skript:

  $scope.id="name";

  $scope.action=function(){
  angular.element($document[0].getElementById("name")).addClass("alllign");
  }

den plunkr : http://plnkr.co/edit/VjORCl5xoHQZbzBG6HDp?p=preview

PS :Jede andere Lösung als die Verwendung von ng-Klasse werden mehr geschätzt. Ich brauche, dass, basierend auf meinem aktuellen problem

  • Grund ist einfach, die Steuerung läuft vor dem dom kompiliert werden kann. Sie setzen nicht dom-manipulation code in eine Steuerung. Versuchen Sie es mit ng-class gebunden Umfang variable
  • ich habe versucht, mit ng-Klasse, aber brauche Sie jetzt. wo sonst kann ich meine dom-manipulation code. eigentlich m die Zuordnung der "id", um ein element in einer link-Funktion in eine Richtlinie. Bevor Sie also die Zuordnung von id, mein controller ausgeführt und m nicht in der Lage, das Ergebnis zu erhalten.
  • warum bist du nicht mit der Richtlinie für die Klasse code ändern? Was konkret ist das problem, dass Sie können nicht verwenden ng-class? Scheint, Sie sind fixiert auf mit element-ID, die kaum je in agular
  • ich möchte diejenigen, die Klassen auf mehrere Elemente, die in der ng-repeat. also die Klasse wird für alle Elemente angewendet. so.. ich muss ids zuweisen Elemente
  • nicht in eckige, die Sie nicht...niemand wird ID dies zu tun, in Winkel, die Sie verwenden, ng-Klasse. Legen Sie ein aktives Element im Umfang und Verwendung ng-Klasse zu vergleichen, das aktuelle Element in Sie wiederholen, um das aktive Element
InformationsquelleAutor vedant sali | 2015-04-27
  1. 4

    Durch ein paar kleine änderungen im code arbeiten. Obwohl meine Präferenz ist in der Regel zu verwenden ng-class wie andere erwähnt haben.

    Controller.js

    var app = angular.module('myApp',[]);

app.controller('Ctrl', function($scope) {
    $scope.id="name";

    $scope.action=function(){
      //Angular Element can select by id directly but you just need to add the #
      angular.element('#name').addClass("alllign");
    };
});

    index.html

    <!-- id can simply be set but you need the quotes -->
<div id='{{id}}'>Text</div>
<!-- Missing parenthesis on function call -->
<button ng-click="action()">action</button>

    Check-out die plunker

    • ich benutzte ur Methode asok seine gute. Bekam aber eine Fehlermeldung, wenn in meinem komplizierten Projekt : - Fehler: [jqLite:nosel] Suchen Elemente über Selektoren ist nicht unterstützt durch jqLite!.... mehr änderungen oder Anregungen?
    • In Ihrer action-Funktion, versuchen Sie, die angular.element zu angular.element(document.getElementById($scope.id)).addClass("alllign"); und lassen Sie mich wissen, ob das funktioniert. Die Fehlermeldung, die Sie bekommen ist eine Selektor-error, Bedeutung, was, die wir Durchlaufen angular.element() funktioniert nicht.
    • Eine bessere alternative wäre die Verwendung einer Richtlinie, Sie haben viel Erfahrung mit denen? In der Regel, wenn es ist ein einmaliger Einsatz, ich werde nicht verwenden eine Richtlinie, aber wenn ich dabei bin, etwas zu wiederholen, wie das, was du tust, als würde ich schreiben, eine kleine, schnelle Richtlinie für es.
    • Noch immer tun, DOM-manipulation in den controller...geht gegen gemeinsame best practices.
    • Ja, das ist der Grund, warum ich bereits in der Antwort, die ich empfehlen ng-class und in den Kommentar über die Verwendung einer benutzerdefinierten Richtlinie seit der OP sagt er ist nicht zu verwenden ng-class.
    InformationsquelleAutor jnthnjns
  2. 1

    Kann ich empfehlen, dass Sie die ng-Klasse-Funktion verwalten Sie Ihre Klasse auf die Elemente?

    <div ng-class="{alllign: clicked}">Text</div>
<button ng-click="clicked=!clicked">action</button>
<script>
    var app = angular.module('myApp', [])
    app.controller('Ctrl', function($scope){
        $scope.id="name"
        $scope.clicked=false
    })
</script>

    plunker: http://plnkr.co/edit/GIYbaDnpAugF1ll3fE5C?p=preview

    ng-Klasse wird ausgewertet und, wo die Variablen sind truthy, diese Klassen Hinzugefügt, um das element automatisch.

    InformationsquelleAutor TobyGWilliams
  3. 0

    Mithilfe von ng-Klasse würde mehr Sinn machen hier eher als mit .addClass Methode

    <div ng-attr-id= {{id}} ng-class="{align: align}">Text</div>
<button ng-click="align=true">action</button>
    InformationsquelleAutor Pankaj Parkar
Schreibe einen Kommentar