Мне любопытно, есть ли способ переопределить отдельные конкретные шаблоны из файла ui-bootstrap-tpls. Подавляющее большинство шаблонов по умолчанию соответствуют моим потребностям, но есть пара конкретных, которые я хотел бы заменить, не проходя весь процесс захвата всех шаблонов по умолчанию и их подключения к версии без tpls.
angularjs
angular-ui
angular-ui-bootstrap
Джереми Приветт
источник
источник
$modalслужбу, чтобы получить больше возможностей настройки, не создавая (надеюсь) слишком большой головной боли при обслуживании.$provide.decorator('$modal'... В моем случае я не хотел отображатьmodalWindowэлемент. Когда-либо. Я просто не использовал его, и это было лучшее, что я мог придумать. Я хотел бы услышать лучший способ, если он у кого-нибудь есть.Ответы:
Да, директивы из http://angular-ui.github.io/bootstrap легко настраиваются, и один из шаблонов легко переопределить (и по-прежнему полагаться на шаблоны по умолчанию для других директив).
Достаточно кормить
$templateCacheлибо напрямую (как это сделано вui-bootstrap-tplsфайле), либо - что, возможно, проще - переопределить шаблон с помощью<script>директивы ( doc ).Надуманный пример , когда я меняю шаблон ALERT, чтобы своп
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>Живой плункер: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview
источник
С помощью
$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: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview
(Обратите внимание, что вы должны добавить суффикс «Directive» к имени директивы, которую собираетесь украсить. Выше мы украшаем
alertдирективу UI Bootstrap , поэтому мы используем это имяalertDirective.)Поскольку вы часто можете захотеть сделать больше, чем просто переопределить
templateUrl, это обеспечивает хорошую отправную точку для дальнейшего расширения директивы, например, путем переопределения / переноса ссылки или функции компиляции ( например ).источник
alertDirectiveэто ключевое слово? если да, то для чего это ключевое словоTabs? Я пытаюсь сделать то же самое на вкладках, но я просмотрел alert.js и не вижу, где ониalertDirectiveтам были.$compileProviderприкрепляет суффикс «Директива» к имени вашей директивы, когда вы ее регистрируете ($filterProviderаналогично с суффиксом «Фильтр»); для большинства целей это невидимо, но при декорировании вам нужно добавить этот суффикс к директиве, на которую вы собираетесь ориентироваться. Например,tabDirectiveилиtabsetDirectiveи т. Д. Не совсем четко документировано где-либо, что я мог найти, но вот ссылка на аналогичное поведение по$filterProviderкрайней мере для: docs.angularjs.org/api/ng/provider/$filterProviderfunction(element, attributes)в templateUrl. Вы можете использовать это для некоторого динамического поведения (вернуть исходную функцию templateUrl или вашу собственную строку URL-адреса в зависимости от атрибута и т. Д.). Однако ui.bootstrap теперь также использует ту же функциональность, чтобы позволить вам указатьtemplate-urlатрибут в директиве, поэтому вы также можете потенциально использовать это, если вы готовы предоставить путь к шаблону напрямую через атрибут элемента директивы.Ответ от pkozlowski.opensource действительно полезен и очень мне помог! Я настроил его в своем условии, чтобы иметь один файл, определяющий все мои переопределения шаблонов angular, и загрузил внешний JS, чтобы уменьшить размер полезной нагрузки.
Для этого перейдите в конец исходного js-файла angular ui-bootstrap (например
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, и вы получите тот же результат.
Раздвоенный версия pkozlowski.opensource «s бухнуться http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview
источник
Вы можете использовать
template-url="/app/.../_something.template.html"для переопределения текущего шаблона для этой директивы.(Работает по крайней мере в Accordion Bootstrap.)
источник