Ich bin gespannt, ob es eine Möglichkeit gibt, einzelne, spezifische Vorlagen aus der Datei ui-bootstrap-tpls zu überschreiben. Die überwiegende Mehrheit der Standardvorlagen entspricht meinen Anforderungen, aber es gibt einige spezifische Vorlagen, die ich ersetzen möchte, ohne den gesamten Prozess des Erfassens aller Standardvorlagen und der Verkabelung mit der Nicht-TPLS-Version durchlaufen zu müssen.
Antworten:
Ja, Direktiven von http://angular-ui.github.io/bootstrap sind in hohem Maße anpassbar und es ist einfach, eine der Vorlagen zu überschreiben (und sich für andere Direktiven weiterhin auf die Standardvorlagen zu verlassen).
Es reicht aus, sie zu füttern $templateCache, entweder direkt (wie in der ui-bootstrap-tplsDatei) oder - wahrscheinlich einfacher - eine Vorlage mithilfe der <script>Direktive ( doc ) zu überschreiben .
Ein konstruiertes Beispiel , wo ich alert die Vorlage Swap bin Wechsel xfür Closeunten dargestellt:
<!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>
Live-Plunker: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview
$provide.decoratorDurch die Verwendung $providezum Dekorieren der Direktive wird vermieden, dass direkt damit herumgespielt werden muss $templateCache.
Erstellen Sie stattdessen Ihre externe HTML-Vorlage wie gewohnt mit einem beliebigen Namen und überschreiben Sie dann die Anweisungen, templateUrlum darauf zu verweisen.
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 von pkozlowski.opensource ‚s plunkr: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview
(Beachten Sie, dass Sie das Suffix 'Direktive' an den Namen der Direktive anhängen müssen, die Sie dekorieren möchten. Oben dekorieren wir die alertDirektive von UI Bootstrap , daher verwenden wir den Namen alertDirective.)
Da Sie häufig mehr tun möchten, als nur die zu überschreiben templateUrl, bietet dies einen guten Ausgangspunkt, um die Direktive weiter zu erweitern, beispielsweise durch Überschreiben / Umschließen der Verknüpfungs- oder Kompilierungsfunktion ( zum Beispiel ).
alertDirectiveein Schlüsselwort? Wenn ja, wofür lautet das Schlüsselwort Tabs? Ich versuche, ähnliche Dinge auf Registerkarten zu tun, aber ich habe die alert.js durchgesehen und sehe nicht, wo sie sich alertDirectivedort befanden .
$compileProviderfügt dem Namen Ihrer Direktive bei der Registrierung ein Suffix 'Direktive' hinzu ( $filterProviderähnlich wie bei einem Suffix 'Filter'). Für die meisten Zwecke ist dies unsichtbar, aber beim Dekorieren müssen Sie dieses Suffix an die Direktive anhängen, auf die Sie abzielen möchten. Zum Beispiel tabDirectiveoder tabsetDirectiveusw. Nicht genau klar dokumentiert, wo ich sie finden konnte, aber hier ist ein Hinweis auf das ähnliche Verhalten $filterProviderzumindest für: docs.angularjs.org/api/ng/provider/$filterProvider
function(element, attributes)TemplateUrl bereitstellen . Sie können dies für ein dynamisches Verhalten verwenden (geben Sie die ursprüngliche templateUrl-Funktion oder Ihre eigene URL-Zeichenfolge zurück, abhängig von einem Attribut usw.). Ui.bootstrap verwendet jetzt jedoch auch dieselbe Funktionalität, mit der Sie ein template-urlAttribut für eine Direktive angeben können. Sie können dies also möglicherweise auch verwenden, wenn Sie den Vorlagenpfad direkt über das Direktivenelementattribut bereitstellen möchten .
Die Antwort von pkozlowski.opensource ist wirklich nützlich und hat mir sehr geholfen! Ich habe es in meinem Zustand so angepasst, dass eine einzige Datei alle meine Winkelvorlagenüberschreibungen definiert, und das externe JS geladen, um die Nutzlastgröße gering zu halten.
Gehen Sie dazu zum Ende der eckigen UI-Bootstrap-Quell-JS-Datei (z. B. ui-bootstrap-tpls-0.6.0.js) und suchen Sie die Vorlage, an der Sie interessiert sind. Kopieren Sie den gesamten Block, der die Vorlage definiert, und fügen Sie ihn in Ihre überschriebene JS-Datei ein.
z.B
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>");
}]);
Fügen Sie dann einfach Ihre Overrides-Datei nach dem UI-Bootstrap hinzu und Sie erzielen das gleiche Ergebnis.
Gegabelte Version von pkozlowski.opensources Plunk http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview
$modalService dekoriert habe , um mehr Konfigurierbarkeit zu erzielen, ohne (hoffentlich) zu viel Wartungsaufwand zu verursachen.$provide.decorator('$modal'... In meinem Fall wollte ich dasmodalWindowElement nicht rendern . Je. Ich habe es einfach nicht benutzt und das war das Beste, was ich mir einfallen lassen konnte. Ich würde gerne einen besseren Weg hören, wenn jemand es hat.