Je suis curieux de savoir si il existe un moyen de remplacer unique, les modèles spécifiques à partir de l'interface utilisateur-bootstrap-npt fichier. La grande majorité des modèles par défaut l'adapter à mes besoins, mais il ya un couple spécifique de ceux que j'aimerais le remplacer sans passer par tout le processus d'accaparement de tous les modèles par défaut et de les amener filaire jusqu'à la non-npt version.
Réponses
Trop de publicités?
Oui, les directives du http://angular-ui.github.io/bootstrap sont hautement personnalisables et il est facile de remplacer l'un des modèles (et toujours compter sur les valeurs par défaut pour d'autres directives).
C'est assez pour nourrir $templateCache, soit de l'alimenter directement (comme le fait dans l' ui-bootstrap-tpls le fichier) ou - sans doute plus simple de remplacer un modèle à l'aide de l' <script> directive (doc).
Un exemple artificiel où je vais changer d'alerte du modèle de swap x pour Close est 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="http://stackoverflow.com//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>
Vivre plunker: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview
ZXZpbGpvaG5pdXM
Points
51
Comme suggéré ci-dessus, à l'aide de $provide pour décorer la directive peut être efficace, et j'espère que d'éviter la nécessité d'directement déconner avec $templateCache.
Au lieu de cela, vous pouvez créer votre template html que vous pourriez normalement, avec le nom que vous s'il vous plaît, et ensuite remplacer la directive de l' templateUrl de la montrer du doigt. Par exemple:
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 de pkozlowski.opensource's plunkr: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview
Comme vous l'avez peut souvent envie de faire plus que de simplement remplacer l' templateUrl, cela fournit un bon point de départ pour étendre la directive, par exemple en substituant/conditionnement du lien ou de la compilation de la fonction.
Matt Byrne
Points
462
La réponse de pkozlowski.l'opensource est vraiment utile et m'a beaucoup aidée! J'ai modifié à ma condition d'avoir un seul fichier de définition de l'ensemble de mes angulaire de modèle de substitutions et chargé de la JS externe pour garder la taille de la charge utile vers le bas.
Pour ce faire, allez au bas de l'angulaire de l'interface utilisateur-bootstrap source fichier js (par exemple, ui-bootstrap-tpls-0.6.0.js) et de trouver le modèle qui vous intéresse. Copiez le bloc entier qui définit le modèle et le coller dans vos remplacements fichier JS.
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, il suffit d'inclure vos remplacements de fichiers après l'interface de démarrage et vous obtenir le même résultat.
Fourche version de pkozlowski.opensource's plunk http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview
