È ansible sovrascrivere modelli specifici in AngularUI Bootstrap?

Sono curioso di sapere se esiste un modo per sostituire i singoli modelli specifici dal file ui-bootstrap-tpls. La maggior parte dei modelli predefiniti si adatta alle mie esigenze, ma ce ne sono un paio specifici che vorrei sostituire senza passare attraverso l’intero processo di acquisizione di tutti i modelli predefiniti e il loro cablaggio fino alla versione non-tpls.

    Sì, le direttive da http://angular-ui.github.io/bootstrap sono altamente personalizzabili ed è facile sovrascrivere uno dei modelli (e fare ancora affidamento su quelli predefiniti per altre direttive).

    È sufficiente alimentare $templateCache , o alimentarlo direttamente (come fatto nel file ui-bootstrap-tpls ) o – probabilmente più semplice – sovrascrivere un modello usando la direttiva ( doc ).

    Un esempio forzato in cui sto cambiando il modello di avviso per scambiare x per Close è mostrato di seguito:

     < !doctype html>          
    {{alert.msg}}

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

    Utilizzando $provide.decorator

    L’utilizzo di $provide per decorare la direttiva evita la necessità di gingillarsi direttamente con $templateCache .

    Invece, crea il tuo template html esterno come potresti normalmente, con qualsiasi nome tu voglia, e quindi sostituisci il templateUrl della direttiva per puntarlo.

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

    Fork del plunkr di pkozlowski.opensource: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview

    (Si noti che è necessario aggiungere il suffisso “Direttiva” al nome della direttiva che si intende decorare. Al di sopra, stiamo decorando la direttiva di alert del Bootstrap dell’interfaccia utente, quindi usiamo il nome alertDirective .)

    Poiché spesso si desidera eseguire più che eseguire l’override di templateUrl , questo fornisce un buon punto di partenza da cui estendere ulteriormente la direttiva, ad esempio sovrascrivendo / spostando il collegamento o la funzione di compilazione ( ad esempio ).

    La risposta di pkozlowski.opensource è davvero utile e mi ha aiutato molto! L’ho ottimizzato nelle mie condizioni per avere un singolo file che definiva tutti i miei override di template angolari e ha caricato il JS esterno per mantenere le dimensioni del carico utile.

    Per fare questo, vai in fondo al file js sorgente ui-bootstrap angular (es. ui-bootstrap-tpls-0.6.0.js ) e trova il modello che ti interessa. Copia l’intero blocco che definisce il modello e incolla nel tuo file JS di override.

    per esempio

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

    Quindi includi il tuo file di override dopo ui-bootstrap e ottieni lo stesso risultato.

    Versione biforcata del plunk di pkozlowski.opensource http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview

    Puoi usare template-url="/app/.../_something.template.html" per sovrascrivere il modello corrente per quella direttiva.

    (Funziona almeno in Bootstrap per fisarmonica).