¿Puedes anular plantillas específicas en AngularUI Bootstrap?

Tengo curiosidad por saber si hay una manera de anular las plantillas únicas y específicas del archivo ui-bootstrap-tpls. La gran mayoría de las plantillas predeterminadas se ajustan a mis necesidades, pero hay algunas más específicas que me gustaría reemplazar sin pasar por todo el proceso de capturar todas las plantillas predeterminadas y conectarlas a la versión que no sea tpls.

Sí, las directivas de http://angular-ui.github.io/bootstrap son altamente personalizables y es fácil sobrescribir una de las plantillas (y aún depender de las predeterminadas para otras directivas).

Es suficiente alimentar $templateCache , ya sea alimentándolo directamente (como se hace en el archivo ui-bootstrap-tpls ) o, probablemente más simple, anule una plantilla usando la directiva ( doc ).

Un ejemplo artificial donde estoy cambiando la plantilla de alerta para intercambiar x para Close se muestra a continuación:

           
{{alert.msg}}

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

Usando $provide.decorator

Usar $provide para decorar la directiva evita la necesidad de perder el tiempo directamente con $templateCache .

En su lugar, cree su plantilla externa html como lo haría normalmente, con el nombre que desee, y luego anule la templateUrl la directiva para señalarla.

 angular.module('plunker', ['ui.bootstrap']) .config(['$provide', Decorate]); function Decorate($provide) { $provide.decorator('alertDirective', function($delegate) { var directive = $delegate[0]; directive.templateUrl = "alertOverride.tpl.html"; return $delegate; }); } 

Tenedor de plunkr de pkozlowski.opensource: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview

(Tenga en cuenta que debe agregar el sufijo ‘Directiva’ al nombre de la directiva que desea decorar. Arriba, estamos decorando la directiva de alert de Bootstrap de UI, así que usamos el nombre alertDirective ).

Como a menudo puede desear hacer algo más que sobrescribir el templateUrl , esto proporciona un buen punto de partida desde el cual extender aún más la directiva, por ejemplo sobrescribiendo / envolviendo el enlace o la función de comstackción ( por ejemplo ).

¡La respuesta de pkozlowski.opensource es realmente útil y me ayudó mucho! Lo modifiqué en mi condición para tener un solo archivo que definiera todas mis anulaciones de plantilla angular y cargué el JS externo para mantener el tamaño de la carga.

Para ello, vaya al final del archivo angular ji-bootstrap source js (por ejemplo, ui-bootstrap-tpls-0.6.0.js ) y encuentre la plantilla que le interese. Copie todo el bloque que define la plantilla y péguelo. en su sobrescribe el archivo JS.

p.ej

 angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) { $templateCache.put("template/alert/alert.html", " 
\n" + " \n" + "
\n" + "
"); }]);

Luego simplemente incluya su archivo de anulaciones después de ui-bootstrap y obtendrá el mismo resultado.

Versión bifurcada de plunk de pkozlowski.opensource http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview

Puede usar template-url="/app/.../_something.template.html" para anular la plantilla actual para esa directiva.

(Funciona en Accordion Bootstrap al menos).