Pouvez-vous remplacer des modèles spécifiques dans AngularUI Bootstrap?

Je suis curieux de savoir s’il existe un moyen de remplacer des modèles spécifiques à partir du fichier ui-bootstrap-tpls. La grande majorité des modèles par défaut correspond à mes besoins, mais il y a quelques modèles spécifiques que je voudrais remplacer sans passer par tout le processus de saisie de tous les modèles par défaut et de les connecter à la version non TPL.

Problème de scope dans AngularJS avec AngularUI Bootstrap Modal

Oui, les directives de http://angular-ui.github.io/bootstrap sont hautement personnalisables et il est facile de remplacer l’un des modèles (et de toujours compter sur les modèles par défaut pour les autres directives).

Il suffit de nourrir $templateCache , soit en l’alimentant directement (comme dans le fichier ui-bootstrap-tpls ), soit – probablement plus simple – pour remplacer un template en utilisant la directive ( doc ).

Un exemple inventif où je change le modèle d'alerte pour permuter x pour Close est illustré ci-dessous:

             {{alert.msg}}

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

Utiliser `$provide.decorator`

Utiliser $provide pour décorer la directive évite d’avoir à manipuler directement $templateCache .

Au lieu de cela, créez votre modèle HTML externe comme vous le feriez normalement, avec le nom de votre choix, puis remplacez la directive templateUrl la directive pour la pointer.

 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 of plunkr de pkozlowski.opensource: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview

(Notez que vous devez append le suffixe “Directive” au nom de la directive que vous avez l’intention de décorer. Au-dessus, nous décorons la directive d’ alert interface utilisateur Bootstrap, nous utilisons donc le nom alertDirective .)

Comme vous pouvez souvent vouloir faire plus que remplacer simplement templateUrl , cela fournit un bon sharepoint départ pour étendre davantage la directive, par exemple en remplaçant / encapsulant le lien ou la fonction de compilation ( par exemple ).

La réponse de pkozlowski.opensource est vraiment utile et m’a beaucoup aidé! Je l’ai modifié dans ma condition pour avoir un fichier unique définissant tous mes remplacements de modèles angulars et chargé le JS externe pour maintenir la taille de la charge utile.

Pour ce faire, allez au bas du fichier source angular ui-bootstrap js (par exemple, ui-bootstrap-tpls-0.6.0.js ) et trouvez le modèle qui vous intéresse. Copiez le bloc entier qui définit le modèle et collez-le il dans votre fichier de remplacement JS.

par exemple

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

Ensuite, il vous suffit d’inclure votre fichier de remplacement après ui-bootstrap et vous obtiendrez le même résultat.

Version fourchue du plunk de pkozlowski.opensource http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview

Vous pouvez utiliser template-url="/app/.../_something.template.html" pour remplacer le modèle actuel de cette directive.

(Fonctionne au moins dans Bootstrap en accordéon.)

Pouvez-vous remplacer des modèles spécifiques dans AngularUI Bootstrap?

Utiliser $provide.decorator

Utiliser `$provide.decorator`