Você pode replace modelos específicos no AngularUI Bootstrap?

Estou curioso para saber se há uma maneira de replace modelos únicos e específicos do arquivo ui-bootstrap-tpls. A grande maioria dos modelos padrão atende às minhas necessidades, mas há alguns específicos que eu gostaria de replace sem passar por todo o processo de pegar todos os modelos padrão e conectá-los à versão não-tpls.

Sim, as diretivas de http://angular-ui.github.io/bootstrap são altamente personalizáveis ​​e é fácil replace um dos modelos (e ainda contar com os padrões para outras diretivas).

É o suficiente para alimentar o $templateCache , seja alimentando-o diretamente (como feito no arquivo ui-bootstrap-tpls ) ou – provavelmente mais simples – sobrescrevendo um template usando a diretiva ( doc ).

Um exemplo inventado onde eu estou mudando o modelo do alerta para trocar x por Close é mostrado abaixo:

           
{{alert.msg}}

Plunker ao vivo: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview

Usando $provide.decorator

Usar $provide para decorar a diretiva evita a necessidade de mexer diretamente com $templateCache .

Em vez disso, crie seu html de modelo externo como faria normalmente, com qualquer nome que desejar e, em seguida, substitua o templateUrl da diretiva para apontar para ele.

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

Garfo do plunkr do pkozlowski.opensource: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview

(Note que você deve append o sufixo ‘Directive’ ao nome da diretiva que você pretende decorar. Acima, estamos decorando a diretiva de alert do UI Bootstrap, então usamos o nome alertDirective .)

Como muitas vezes você pode querer fazer mais do que simplesmente sobrescrever o templateUrl , isso fornece um bom ponto de partida para estender ainda mais a diretiva, por exemplo, sobrepondo / envolvendo o link ou a function de compilation ( por exemplo ).

A resposta do pkozlowski.opensource é muito útil e me ajudou muito! Eu mexi na minha condição para ter um único arquivo definindo todas as minhas substituições de gabaritos angulares e carreguei o JS externo para manter o tamanho do payload baixo.

Para fazer isso, vá para a parte inferior do arquivo js de origem do ui-bootstrap angular (por exemplo, ui-bootstrap-tpls-0.6.0.js ) e encontre o modelo de seu interesse. Copie todo o bloco que define o modelo e cole -lo em seu arquivo JS substitui.

por exemplo

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

Então apenas inclua seu arquivo de substituição após o ui-bootstrap e você obterá o mesmo resultado.

Versão bifurcada do plunk do pkozlowski.opensource http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview

Você pode usar template-url="/app/.../_something.template.html" para replace o modelo atual para essa diretiva.

(Funciona no Accordion Bootstrap, pelo menos.)