Search code examples
angularjsangular-uiangular-ui-bootstrap

Can you override specific templates in AngularUI Bootstrap?


I'm curious if there's a way to override single, specific templates from the ui-bootstrap-tpls file. The vast majority of the default templates fit my needs, but there's a couple specific ones I'd like to replace without going through the whole process of grabbing all the default templates and getting them wired up to the non-tpls version.


Solution

  • Yes, directives from http://angular-ui.github.io/bootstrap are highly customizable and it is easy to override one of the templates (and still rely on the default ones for other directives).

    It is enough to feed $templateCache, either feeding it directly (as done in the ui-bootstrap-tpls file) or - probably simpler - override a template using the <script> directive (doc).

    A contrived example where I'm changing alert's template to swap x 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.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