Мені цікаво, чи є спосіб замінити окремі, конкретні шаблони з файлу ui-bootstrap-tpls. Переважна більшість шаблонів за замовчуванням відповідають моїм потребам, але є кілька конкретних, які я хотів би замінити, не проходячи весь процес захоплення всіх шаблонів за замовчуванням та підключення їх до версії, що не є tpls.
Відповіді:
Так, директиви з 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
(Зверніть увагу, що ви повинні додати суфікс „Директива“ до назви директиви, яку ви збираєтеся прикрасити. Вище ми прикрашаємо alertдирективу Bootstrap інтерфейсу користувача , тому ми використовуємо це ім’я alertDirective.)
Оскільки вам часто хочеться зробити більше, ніж просто перевизначити templateUrl, це забезпечує гарну вихідну точку для подальшого розширення директиви, наприклад, замінивши / обернувши посилання або функцію компіляції ( наприклад ).
alertDirectiveключове слово? якщо так, для чого потрібне ключове слово Tabs? Я намагаюся зробити подібне на вкладках, але я переглянув alert.js і не бачу, де вони alertDirectiveтам були.
$compileProviderдодає суфікс "Директива" до імені вашої директиви, коли ви її реєструєте ( $filterProviderаналогічно це робить із суфіксом "Фільтр"); для більшості цілей це невидимо, але під час оформлення вам потрібно буде додати цей суфікс до директиви, на яку ви збираєтесь націлитись. Наприклад, tabDirectiveабо tabsetDirectiveтощо. Ніде точно не задокументовано, де б я не міг знайти, але ось посилання на подібну поведінку $filterProviderпринаймні: docs.angularjs.org/api/ng/provider/$filterProvider
function(element, attributes)до templateUrl. Ви можете використовувати це для певної динамічної поведінки (повернути оригінальну функцію templateUrl або власний рядок URL-адреси залежно від атрибута тощо). Однак, ui.bootstrap тепер також використовує цю саму функціональність, щоб дозволити вам вказувати template-urlатрибут директиви, тому ви також можете потенційно використовувати це, якщо будете раді надавати шлях до шаблону безпосередньо через атрибут елемента директиви.
Відповідь від pkozlowski.opensource дійсно корисна і мені дуже допомогла! Я змінив його в моєму стані, щоб мати один файл, що визначає всі мої кутові перевизначення шаблону, і завантажив зовнішній JS, щоб зменшити розмір корисного навантаження.
Для цього перейдіть до нижньої частини кутового файлу js 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
$modalпослугу, щоб отримати більше можливостей налаштування, не створюючи (сподіваюся) занадто сильного головного болю в обслуговуванні.$provide.decorator('$modal'... У моєму випадку я не хотів відображатиmodalWindowелемент. Ніколи. Я просто не використовував його, і це було найкраще, що я міг придумати. Я хотів би почути кращий спосіб, якщо хтось його має.