Best IT Recipes

Can you override specific templates in AngularUI Bootstrap?

I am curious if there is a way to override individual templates from the ui-bootstrap-tpls file. The vast majority of default templates meet my needs, but there are a few specific ones that I would like to replace without going through the whole process of capturing all the default templates and connecting them to the non-tpls version.

+85
angularjs angular-ui angular-ui-bootstrap
Jul 15 '13 at 18:12
source share
4 answers

Yes, the directives from http://angular-ui.imtqy.com/bootstrap are very customizable and it is easy to override one of the templates (and still rely on standard directives for other directives).

It is enough to feed $templateCache , or directly load it (as is done in the ui-bootstrap-tpls ), or, perhaps, it is easier to override the template using the <script> ( doc ) directive.

A customized example where I change the warning pattern for x exchange for Close is shown below:

 <!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.imtqy.com/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

+119
Jul 16 '13 at 13:09 on
source share

Using $provide.decorator

$provide using $provide to decorate this directive, avoid the need for direct traversal with $templateCache .

Instead, create your external html template, as usual, with whatever name you want, and then override the templateUrl directive to point to it.

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

(Note that you must add the suffix "Directive" to the name of the directive you are about to decorate. We decorate the UI Bootstrap alert directive above, so we use the name alertDirective .)

As you often can do more than just override templateUrl , this provides a good starting point for further expanding the directive, for example, by redefining / wrapping a link or compilation function ( for example ).

+76
Oct 13 '14 at 12:22
source share

The answer from pkozlowski.opensource is really helpful and really helped me! I changed it in my state to have a single file defining all of my angular pattern overrides and loaded external JS to reduce the payload size.

To do this, go to the end of the js file of the angular ui-bootstrap source file (for example, ui-bootstrap-tpls-0.6.0.js ) and find the template you are interested in. Copy the entire block that defines the template and paste it into your overrides JS file.

eg.

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

Then just include the override file after ui-bootstrap and you will get the same result.

Forked version of pkozlowski.opensource plunk http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview

+27
Nov 01 '13 at 2:48
source share

You can use template-url="/app/.../_something.template.html" to override the current template for this directive.

(Works at least in the Accordion bootstrap.)

+6
Nov 13 '15 at 16:46
source share


More articles:


All Articles