Можете ли вы переопределить определенные шаблоны в AngularUI Bootstrap?

Мне любопытно, есть ли способ переопределить отдельные шаблоны из файла ui-bootstrap-tpls. Подавляющее большинство шаблонов по умолчанию соответствуют моим потребностям, но есть несколько конкретных, которые я бы хотел заменить, не пройдя весь процесс захвата всех шаблонов по умолчанию и подключив их к версии non-tpls.

Ответ 1

Да, директивы от http://angular-ui.github.io/bootstrap очень настраиваются и легко переопределить один из шаблонов (и по-прежнему полагаться на стандартные для других директив).

Достаточно прокормить $templateCache, либо напрямую загружать его (как это сделано в файле ui-bootstrap-tpls), либо, возможно, проще - переопределить шаблон с помощью директивы <script> (doc).

Настроенный пример, где я изменяю шаблон предупреждения для обмена x для Close, показан ниже:

<!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

Ответ 2

Использование `$provide.decorator`

Используя $provide, чтобы украсить эту директиву, избегайте необходимости прямого обхода с помощью $templateCache.

Вместо этого создайте свой внешний шаблон html, как обычно, с любым именем, которое вы хотите, а затем переопределите директиву templateUrl, чтобы указать на него.

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

Вилка pkozlowski.opensource plunkr: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview

(Обратите внимание, что вы должны добавить суффикс "Директива" к имени директивы, которое вы собираетесь украсить. Выше мы декорируем директиву UI Bootstrap alert, поэтому мы используем имя alertDirective.)

Как вы часто можете сделать больше, чем просто переопределить templateUrl, это обеспечивает хорошую отправную точку для дальнейшего расширения директивы, например, путем переопределения/переноса ссылки или функции компиляции (например).

Ответ 3

Ответ от pkozlowski.opensource действительно полезен и очень помог мне! Я изменил его в моем состоянии, чтобы иметь один файл, определяющий все мои переопределения шаблона angular, и загрузил внешний JS, чтобы уменьшить размер полезной нагрузки.

Для этого перейдите в конец файла js файла angular ui-bootstrap source (например, ui-bootstrap-tpls-0.6.0.js) и найдите интересующий вас шаблон. Скопируйте весь блок, который определяет шаблон, и вставьте его в свой переопределяет JS файл.

например.

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

Затем просто включите файл переопределения после ui-bootstrap и вы получите тот же результат.

Forked версия pkozlowski.opensource plunk http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview

Ответ 4

Вы можете использовать template-url="/app/.../_something.template.html", чтобы переопределить текущий шаблон для этой директивы.

(работает как минимум в Аккордеонном бутстрапе.)

Ответ 1

Ответ 2

Использование $provide.decorator

Ответ 3

Ответ 4

Использование `$provide.decorator`