AngularJS greift auf DOM-Elemente innerhalb der Direktivenvorlage zu

Ist es eine eher "eckige" Art auswählen von DOM-Elementen im inneren eine Richtlinie Vorlage? Zum Beispiel, sagen, Sie haben diese Richtlinie:

app.directive("myDirective", function() {
    return {
        template: '<div><ul><li ng-repeat="item in items"></ul></div>',
        link: function(scope, element, attrs) {
            var list = element.find("ul");
        }
    }
});

Ich verwendet die jQuery-style-Selektor in den Griff bekommen, der DOM <ul> - element gerendert, in mein template. Gibt es einen besseren Weg, dies zu tun?

Kommentar zu dem Problem

In Staat, ich glaube nicht, dass es einen besseren Weg, das zu tun. Aber es ist wahrscheinlich eine bessere Wahl als wählen Sie ein element aus. Was ist dein Ziel genau ? Kommentarautor: Blackhole

Nichts besonderes. Dies ist nur eine Allgemeine Sache, die ich am laufen zu halten. Werde ich brauchen, um den Zugriff auf die DOM-Elemente in einer Richtlinie Vorlage-aus welchem Grund auch immer, aber mit jQuery style Selektoren scheint nur falsch. Kommentarautor: Dustin

@Dustin wie Blackhole erwähnt, in 90% der Richtlinien, die Sie nicht brauchen, um Zugriff auf das DOM-element durch ein Selektor, der - und das ist auch der Grund, warum Eckig ist JQueryLite unterstützt nur sehr wenige und grundlegende Selektoren. Wenn Sie können lassen Sie uns wissen, was Sie versuchen zu erreichen, dann würde jemand vorschlagen, eine bessere Weise, es zu tun. Kommentarautor: ganaraj

ganaraj, ich weiß nicht, dass ich etwas bestimmtes jetzt. Ich habe benötigen diese DOM-Elementen aus verschiedenen Gründen (z.B. anwenden von CSS-Formatvorlagen, um eine Liste nach der ngRepeat fertig ist). Ich war nur neugierig, ob jemand eine elegante Lösung dafür... die Erstellung einer eigenen Richtlinie vielleicht? Kommentarautor: Dustin

anwenden von CSS-Formatvorlagen, um eine Liste nach der ngRepeat beendet hat ? cant Verwendung ng-Klasse / ng-Stil mit ng-repeat? Der Grund für die Befragung Ihrer Fragen ist, dass die Prämisse für die "Winkel-Art auswählen von DOM-Elementen" an sich falsch ist, da die Winkel Weg ( in den meisten Fällen ) nicht auswählen von DOM-Elementen.. Kommentarautor: ganaraj

InformationsquelleAutor der Frage Dustin | 2013-04-08

angularjs angularjs-directive

Könnten Sie schreiben, eine Richtlinie für diese, die schlicht und einfach weist die (jqLite) - element, um den Umfang mit einem Attribut-Namen gegeben.

Ist hier die Richtlinie:

app.directive("ngScopeElement", function () {
  var directiveDefinitionObject = {

    restrict: "A",

    compile: function compile(tElement, tAttrs, transclude) {
      return {
          pre: function preLink(scope, iElement, iAttrs, controller) {
            scope[iAttrs.ngScopeElement] = iElement;
          }
        };
    }
  };

  return directiveDefinitionObject;
});

Verwendung:

app.directive("myDirective", function() {
    return {
        template: '<div><ul ng-scope-element="list"><li ng-repeat="item in items"></ul></div>',
        link: function(scope, element, attrs) {
            scope.list[0] //scope.list is the jqlite element, 
                          //scope.list[0] is the native dom element
        }
    }
});

Einige Bemerkungen:

Aufgrund der kompilieren und verknüpfen, um für verschachtelte Richtlinien können Sie nur auf scope.list aus myDirectives postLink-Funktion, die Sie sehr wahrscheinlich sowieso
ngScopeElement verwendet einen preLink-Funktion, so dass Richtlinien geschachtelt innerhalb des Elements mit ng-scope-element können schon zugreifen scope.list
nicht sicher, wie verhält sich diese performance-wise

InformationsquelleAutor der Antwort CodeSalad

Ich glaube nicht, dass es eine "Winkel-Art", um ein element auszuwählen. Siehe, zum Beispiel, wie Sie sind, dieses Ziel zu erreichen, in dem letzten Beispiel von diese alte Dokumentation Seite:

{
     template: '<div>' +
    '<div class="title">{{title}}</div>' +
    '<div class="body" ng-transclude></div>' +
    '</div>',

    link: function(scope, element, attrs) {
        //Title element
        var title = angular.element(element.children()[0]),
        //...
    }
}

InformationsquelleAutor der Antwort Blackhole

Diese Antwort kommt ein bisschen spät, aber ich war in einer ähnlichen müssen.

Beobachtung der Kommentare geschrieben von @ganaraj in der Frage Einer use-case-ich war in die Notwendigkeit ist, die übergabe eines classname über eine Richtlinie-Attribut Hinzugefügt werden, um ein ng-repeat li-tag in der Vorlage.

Verwenden Sie zum Beispiel die Richtlinie wie diese:

<my-directive class2add="special-class" />

Und Holen Sie sich die folgende html:

<div>
    <ul>
       <li class="special-class">Item 1</li>
       <li class="special-class">Item 2</li>
    </ul>
</div>

Die Lösung gefunden hier angewendet mit templateUrl wäre:

app.directive("myDirective", function() {
    return {
        template: function(element, attrs){
            return '<div><ul><li ng-repeat="item in items" class="'+attrs.class2add+'"></ul></div>';
        },
        link: function(scope, element, attrs) {
            var list = element.find("ul");
        }
    }
});