Ampliación Angular De La Directiva

Me gustaría hacer una pequeña modificación a la 3ª parte de la directiva (específicamente Angular de la interfaz de usuario de Bootstrap). Simplemente quiero añadir que el ámbito de aplicación de la pane directiva:

angular.module('ui.bootstrap.tabs', [])
.controller('TabsController', ['$scope', '$element', function($scope, $element) {
  //various methods
}])
.directive('tabs', function() {
  return {
    //etc...
  };
})
.directive('pane', ['$parse', function($parse) {
  return {
    require: '^tabs',
    restrict: 'EA',
    transclude: true,
    scope:{
      heading:'@',
      disabled:'@' //<- ADDED SCOPE PROPERTY HERE
    },
    link: function(scope, element, attrs, tabsCtrl) {
      //link function
    },
    templateUrl: 'template/tabs/pane.html',
    replace: true
  };
}]);

Pero también quiero mantener Angular-Arranque hasta la fecha con Bower. Tan pronto como puedo ejecutar bower update, voy a sobrescribir mis cambios.

Entonces, ¿cómo puedo ir acerca de la extensión de la presente directiva por separado de este bower componente?

  • El limpia sería el uso de $provide.decorator(), véase mi respuesta a continuación.
InformationsquelleAutor Kyle | 2013-06-09

5 Kommentare

  1. 96

    Probablemente la forma más sencilla de resolver este problema es crear una directiva relativa a la aplicación con el mismo nombre de la tercera parte de la directiva. Ambas directivas se ejecutará y se puede especificar su ejecución a fin de utilizar las priority propiedad (mayor prioridad se ejecuta primero).

    Las dos directivas compartir alcance y puede acceder y modificar el alcance de la tercera parte de la directiva a través de su directiva link método.

    Opción 2: también puede acceder a una tercera parte de la directiva del ámbito de simplemente poner su propio arbitrariamente denominada directiva sobre el mismo elemento con él (suponiendo que ni la directiva utiliza aislar ámbito de aplicación). Todos los no-aislar el ámbito de aplicación de las directivas sobre un elemento compartirán alcance.

    Leer Más: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives

    Nota: Mi respuesta anterior era para la modificación de un servicio de terceros, no una directiva.

    • gracias @sh0ber, esto es exactamente lo que yo necesitaba. Y su respuesta anterior me ayudó así, re: 3ª parte de los servicios.
    • Hey, esta respuesta es muy buena, pero no puedo encontrar ninguna documentación acerca de la «prioridad» de la propiedad de las directivas. Todos los que encontré fue una propaganda que dice «se puede utilizar», pero no puede encontrar ejemplos de ello.
    • La directiva de la API de información, aparentemente, ha sido trasladado a la $compile doc aquí
  2. 60

    TL;DR – gimme tha demo!


         Gran Botón Demo     
     


    Uso $provide‘s decorador() para decorar la tercera parte de la directiva.

    En nuestro caso, podemos extender el alcance de la directiva así:

    app.config(function($provide) {
        $provide.decorator('paneDirective', function($delegate) {
            var directive = $delegate[0];
            angular.extend(directive.scope, {
                disabled:'@'
            });
            return $delegate;
        });
    });

    Primera, solicitamos a decorar la pane directiva pasando su nombre, concatenado con Directive como el primer argumento, entonces podemos recuperar de la devolución de llamada parámetro (que es un conjunto de directivas que coinciden con dicho nombre).

    Una vez que lo tenemos, podemos obtener su ámbito de aplicación objeto y ampliar según sea necesario. Aviso que todo esto tiene que ser hecho en el config bloque.

    Algunas notas

    • Se ha sugerido simplemente agregar una directiva con el mismo nombre, a continuación, establezca su nivel de prioridad. Aparte de ser unsemantic (que es ni siquiera una palabra, lo sé…), que plantea problemas, por ejemplo, qué hacer si la tercera parte de la directiva de nivel de prioridad cambios?

    • JeetendraChauhan ha reclamado (yo no lo he probado aunque) que esta solución no funciona en la versión 1.13.

    • Esto funciona perfectamente. Pero lo que me interesa es añadir funcionalidad a la directiva original en sí, como agregar un evento emisor a ella. Como tengo la presente directiva(de la biblioteca) que proporciona información acerca de una película que se está reproduciendo e.g el currentTime del vídeo. Ahora cada vez que la currentTime se actualiza, quiero emitir y evento, alguna idea de cómo puedo hacerlo?
    • sugiero que da @sh0ber la respuesta de una ir (crear otra directiva sólo por la emisión de eventos).
    • Una nota rápida acerca de esta respuesta (que funciona perfectamente), la ‘Directiva’ en ‘paneDirective’ tiene un propósito 😉 me tomó un tiempo antes de descubrir que: stackoverflow.com/questions/19409017/…, ver la aceptación respuesta.
    • gracias, @JeetendraChauhan, he actualizado la respuesta en consecuencia.
    • hola @EliranMalka comprobar mi plunker plnkr.co/editar/0mvQjHYjQCFS6joYJdwK espero que esto ayude a alguien
    • genial, voy a incluir un enlace a ella en la respuesta, a condición de que usted me diga lo demuestra 🙂
    • El enlace a decorator() está roto (actualizado a docs.angularjs.org/api/auto/service/$proporcionan#decorador)
    • Cómo se puede hacer esto para crear una nueva directiva? Por ejemplo, me gustaría tener acceso tanto a la directiva original en una sola página Y mi costumbre de la directiva en una página diferente?
    • consulte @sh0ber la respuesta de arriba.
    • Aquí hay otra solución para un escenario diferente de la ampliación de los enlaces a una directiva con el bindToController de la propiedad.
    • gracias @giladmayani! fue esta introducido en una versión posterior? (veo v1.5.x está incluido en la demo). puesto esto como otra respuesta para que otros puedan beneficiarse de una solución alternativa 🙂
    • sí, bindToController se introdujo en v1.3. Pero tenga en cuenta que esto no es para ser considerada como una alternativa de solución, esto es sólo para un caso específico en el cual la directiva original fue creada con el bindToController de la propiedad. Buena idea, voy a publicar esto como una respuesta 🙂

  3. 8

    Mientras esta no es la respuesta directa a su pregunta, puede que desee que la última versión (en principal) de http://angular-ui.github.io/bootstrap/ añadido soporte para la desactivación de pestañas. Esta característica se agregó a través de:
    https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2

    • +1 para el heads up. es bueno saber. supongo bower del angular-bootstrap y el bootstrap componente de angular-interfaz de usuario están sincronizadas.
  4. 6

    Otra solución que crear una nueva directiva que se extiende sin la modificación de la directiva original

    La solución es similar a la de decorador solución:

    Crear una nueva directiva y a inyectar como dependencia de la directiva que desean ampliar

    app.directive('extendedPane', function (paneDirective) {
    
      //to inject a directive as a service append "Directive" to the directive name
      //you will receive an array of directive configurations that match this 
      //directive (usually only one) ordered by priority
    
      var configExtension = {
         scope: {
           disabled: '@'
         }
      }
    
      return angular.merge({}, paneDirective[0], configExtension)
    });

    De esta manera puede utilizar la directiva original y la versión extendida de la misma aplicación

    • Esto es genial, justo lo que necesitaba para extender una aislar ámbito de aplicación de la directiva con mis propias variables!! Me encontré que con el angular.extender no deep-copiar objetos, por lo que esto sustituye paneDirective alcance del objeto con este. Una alternativa es angular.combinación que se mantenga el alcance original de PaneDirective y agregar o combinar las variables definidas aquí.
    • sí, angular.merge debería haberse utilizado, voy a actualizar el ejemplo
  5. 1

    Aquí hay otra solución para un escenario diferente de la ampliación de los enlaces a una directiva que tiene el bindToController propiedad.

    Nota: esta no es una alternativa a otras soluciones que se ofrecen aquí. Se soluciona sólo en un caso específico (no cubiertos en otras respuestas) donde la directiva original fue de set-up con bindToController.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea