Je suis curieux de savoir s'il existe un moyen de remplacer des modèles uniques et spécifiques du fichier ui-bootstrap-tpls. La grande majorité des modèles par défaut répondent à mes besoins, mais j'aimerais en remplacer quelques-uns spécifiques sans passer par tout le processus de capture de tous les modèles par défaut et de les connecter à la version non-tpls.
Réponses:
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 s'appuyer sur ceux par défaut pour les autres directives).
Il suffit de nourrir $templateCache, soit le nourrir directement (comme fait dans le ui-bootstrap-tplsfichier) ou - probablement plus simple - remplacer un modèle en utilisant la <script>directive ( doc ).
Un exemple artificiel où je change le modèle de l' alerte à échange xpour Closeest indiqué ci - dessous:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script id="template/alert/alert.html" type="text/ng-template">
<div class='alert' ng-class='type && "alert-" + type'>
<button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button>
<div ng-transclude></div>
</div>
</script>
</head>
<body>
<div ng-controller="AlertDemoCtrl">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
{{alert.msg}}
</alert>
<button class='btn' ng-click="addAlert()">Add Alert</button>
</div>
</body>
</html>Plunker en direct: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview
$provide.decoratorUtiliser $providepour décorer la directive évite d'avoir à jouer directement avec $templateCache.
Au lieu de cela, créez votre modèle externe html comme vous le feriez normalement, avec le nom que vous voulez, puis remplacez la directive templateUrlpour y 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;
});
}Fourche du plunkr de pkozlowski.opensource: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview
(Notez que vous devez ajouter le suffixe "Directive" au nom de la directive que vous souhaitez décorer. Ci-dessus, nous décorons la alertdirective de UI Bootstrap , nous utilisons donc le nom alertDirective.)
Comme vous pouvez souvent vouloir faire plus que simplement remplacer le templateUrl, cela fournit un bon point de départ pour étendre davantage la directive, par exemple en surchargeant / encapsulant le lien ou la fonction de compilation ( par exemple ).
alertDirectiveun mot-clé? si oui, à quoi sert le mot-clé Tabs? J'essaie de faire la même chose sur les onglets, mais j'ai parcouru alert.js et je ne vois pas où ils se trouvaient alertDirective.
$compileProviderattache un suffixe «Directive» au nom de votre directive lorsque vous l'enregistrez (le $filterProviderfait de même avec un suffixe «Filtre»); dans la plupart des cas, cela est invisible, mais lors de la décoration, vous devrez ajouter ce suffixe à la directive que vous avez l'intention de cibler. Par exemple, tabDirectiveou tabsetDirective, etc. Pas exactement clairement documenté nulle part que je pouvais trouver, mais est là une référence au comportement similaire pour $filterProviderau moins: docs.angularjs.org/api/ng/provider/$filterProvider
function(element, attributes)à templateUrl. Vous pouvez l'utiliser pour un comportement dynamique (retournez la fonction templateUrl d'origine ou votre propre chaîne d'URL en fonction d'un attribut, etc.). Cependant, ui.bootstrap utilise désormais également cette même fonctionnalité pour vous permettre de fournir un template-urlattribut sur une directive, vous pouvez donc également l'utiliser si vous êtes heureux de fournir le chemin du modèle directement via l'attribut d'élément de directive.
La réponse de pkozlowski.opensource est vraiment utile et m'a beaucoup aidé! Je l'ai modifié dans ma condition pour avoir un seul fichier définissant tous mes remplacements de modèles angulaires et chargé le JS externe pour réduire la taille de la charge utile.
Pour ce faire, allez au bas du fichier js source angulaire ui-bootstrap (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 dans votre fichier JS de substitutions.
par exemple
angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/alert/alert.html",
" <div class='alert' ng-class='type && \"alert-\" + type'>\n" +
" <button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button>\n" +
" <div ng-transclude></div>\n" +
" </div>");
}]);Ensuite, incluez simplement votre fichier de remplacement après ui-bootstrap et vous obtiendrez le même résultat.
Version fourchue pkozlowski.opensource « s Plunk http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview
$modalservice pour obtenir plus de configurabilité sans (espérons-le) créer trop de casse-tête de maintenance.$provide.decorator('$modal'... Dans mon cas, je ne voulais pas rendre l'modalWindowélément. Déjà. Je ne l'utilisais tout simplement pas, et c'était le mieux que je pouvais trouver. J'adorerais entendre une meilleure façon si quelqu'un l'a.