ejemplos - AngularJS accede a los elementos DOM dentro de la plantilla directiva

directivas personalizadas angularjs

Question

¿Hay una manera más "angular" de seleccionar elementos DOM dentro de una plantilla directiva? Por ejemplo, supongamos que tiene esta directiva:

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");
        }
    }
});

Usé el selector de estilo jQuery para obtener el elemento DOM <ul> representado en mi plantilla. ¿Hay una mejor manera de hacer esto?

Answer 1

Esta respuesta llega un poco tarde, pero solo tenía una necesidad similar.

Al observar los comentarios escritos por @ganaraj en la pregunta, Un caso de uso en el que necesitaba fue el de pasar un nombre de clase a través de un atributo de directiva para agregarlo a una etiqueta ng-repeat li en la plantilla.

Por ejemplo, use la directiva de esta manera:

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

Y obtenga el siguiente html:

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

La solución que se encuentra here aplicada con templateUrl, sería:

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");
        }
    }
});

Acabo de probarlo con éxito con AngularJS 1.4.9.

Espero eso ayude.

Answer 2

No creo que haya una forma más "angular" para seleccionar un elemento. Ver, por ejemplo, la forma en que están logrando este objetivo en el último ejemplo de esta antigua página de documentación :

{
     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]),
        // ...
    }
}

Answer 3

Podría escribir una directiva para esto, que simplemente asigna el elemento (jqLite) al alcance utilizando un nombre dado por un atributo.

Aquí está la directiva:

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

Uso:

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

Algunas observaciones:

• Debido al orden de compilación y enlace para las directivas anidadas , solo puede acceder a scope.list desde la myDirective postLink de myDirective, que muy probablemente utilizará de todos modos.
• ngScopeElement utiliza una función preLink, para que las directivas anidadas dentro del elemento que tiene ng-scope-element puedan acceder ya a scope.list
• no estoy seguro de cómo se comporta esto en términos de rendimiento