Ampliación de la directiva angular

Me gustaría hacer una modificación menor a una directiva de terceros (específicamente Angular UI Bootstrap ). Simplemente quiero agregar al alcance de la panedirectiva:

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-Bootstrap actualizado con Bower. Tan pronto como corra bower update, sobrescribiré mis cambios.

Entonces, ¿cómo hago para extender esta directiva por separado de este componente de bower?

Probablemente, la forma más sencilla de resolver esto es crear una directiva en su aplicación con el mismo nombre que la directiva de terceros. Ambas directivas se ejecutarán y puede especificar su orden de ejecución utilizando la prioritypropiedad (la prioridad más alta se ejecuta primero).

Las dos directivas compartirán el alcance y puede acceder y modificar el alcance de la directiva de terceros a través del linkmétodo de su directiva .

Opción 2: También puede acceder al alcance de una directiva de terceros simplemente colocando su propia directiva nombrada arbitrariamente en el mismo elemento (asumiendo que ninguna directiva usa un alcance aislado). Todas las directivas de alcance no aisladas de un elemento compartirán el alcance.

Lectura adicional: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives

Nota: Mi respuesta anterior fue para modificar un servicio de terceros, no una directiva.

TL; DR - ¡dame la demostración!

     Big Demo Button     
 

Use $provide's decorator()para, bueno, decorar la directiva del tercero.

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

Primero, solicitamos decorar la panedirectiva pasando su nombre, concatenado con Directivecomo primer argumento, luego lo recuperamos del parámetro de devolución de llamada (que es una matriz de directivas que coinciden con ese nombre).

Una vez que lo tenemos, podemos obtener su objeto de alcance y extenderlo según sea necesario. Tenga en cuenta que todo esto debe hacerse en el configbloque.

Algunas notas

• Se ha sugerido simplemente agregar una directiva con el mismo nombre y luego establecer su nivel de prioridad. Además de ser poco semántico (que ni siquiera es una palabra , lo sé ...), plantea problemas, por ejemplo, ¿qué pasa si el nivel de prioridad de la directiva de terceros cambia?

• JeetendraChauhan ha afirmado (aunque no lo he probado) que esta solución no funcionará en la versión 1.13.

Si bien esta no es la respuesta directa a su pregunta, es posible que desee saber que la última versión (en master) de http://angular-ui.github.io/bootstrap/ agregó soporte para deshabilitar pestañas. Esta función se agregó a través de: https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2

Otra solución en la que crea una nueva directiva que la extiende sin modificar la directiva original

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

Cree una nueva directiva e inyecte como dependencia la directiva que desea extender

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 usar la directiva original y la versión extendida en la misma aplicación

Aquí hay otra solución para un escenario diferente de extender enlaces a una directiva que tiene la bindToControllerpropiedad.

Nota: esta no es una alternativa a otras soluciones que se ofrecen aquí. Resuelve solo un caso específico (no cubierto en otras respuestas) en el que se estableció la directiva original bindToController.