Angular шаблон шаблона ui bootstrap отсутствует

В настоящее время я тестирую angular bootstrap-UI локально на своей машине. Когда я пытаюсь воссоздать пример аккордеона и диалогового окна. Я получаю это сообщение об ошибке в моей консоли, говоря, что шаблон отсутствует.

Пример ошибки:     404 Не найдено - localhost/ angular/template/message.html

Когда я смотрю в ui-bootstrap-0.1.0.js, директива имеет шаблон URL.

Какова цель templateURL для директивы?

Являются ли эти шаблоны включенными при загрузке всего файла angular bootstrap-UI zip?

Мне не хватает других файлов, которые я должен включить в свой заголовок?

<link rel="stylesheet" href="includes/css/bootstrap.css">
<script src="includes/js/angular.js"></script>
<script src="includes/js/ui-bootstrap-0.1.0.js"></script>

Ответы

Ответ 1

У вас есть два варианта:

  • Если вы не хотите создавать свои собственные шаблоны и хотите встроенные, вы должны загрузить файл ui-bootstrap-tpls-0.1.0.js - это вводит все шаблоны, чтобы они были предварительно кэшированы в ваше приложение: https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322

  • Если вы хотите создать некоторые из ваших собственных шаблонов, создайте в своем приложении папку templates и загрузите шаблоны из проекта angular -ui/bootstrap. Затем перезапишите те, которые вы хотите настроить самостоятельно.

Подробнее здесь: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files

изменить

Вы также можете загрузить bootstrap-tpls.js и по-прежнему перезаписать некоторые из директивных шаблонов с вашими собственными, используя декодер AngularJS для изменения директивы templateUrl. Вот пример, который изменил шаблон datepickerUrl:

http://docs.angularjs.org/api/AUTO.$provide#methods_decorator

myApp.config(function($provide) {
  $provide.decorator('datepickerDirective', function($delegate) {
    //we now get an array of all the datepickerDirectives, 
    //and use the first one
    $delegate[0].templateUrl = 'my/template/url.html';
    return $delegate;
  });
});

Ответ 2

Мои 5 центов после потери 2 часа с этой проблемой. Вы должны:

  • Перейдите в http://angular-ui.github.io/bootstrap/. Нажмите на создание пользовательской сборки и выберите функции, которые вы используете. (Нет смысла тянуть 60k за 1 элемент).
  • Включить custom.tpls.js, в моем случае это было ui-bootstrap-custom-0.10.0.min.js
  • В вашем модуле Angular include 'ui.bootstrap.yourfeature' в моем случае это было 'ui.bootstrap.modal'

  • , а также 'ui.bootstrap.tpls'. Таким образом, мои модульные настройки выглядят следующим образом:

    var profile = angular.module("profile",[ 'ui.bootstrap.modal', 'ui.bootstrap.tpls' ]);

  • Сэкономьте 2 часа и будьте счастливы:-).

Ответ 3

Это сообщение об ошибке также появляется в другом сценарии, как показано здесь: http://plnkr.co/edit/aix6PZ?p=preview

Если вы заявляете, что ваша зависимость модуля является только "ui.bootstrap.dialog", а не "ui.bootstrap", angular кашляет шаблон, не найденный.

Вот официальное объяснение "почему": https://github.com/angular-ui/bootstrap/issues/266

Ответ 4

Я столкнулся с той же ошибкой, хотя в моем index.html были определены оба обязательных скрипта. Наконец, я изменил порядок загрузки, установив сначала ui-bootstrap.js script и ui-bootstrap-tpls.js после этого. Это поставило проблему. Однако позже я заметил (как было сказано выше), что требуется только одна lib. Поэтому я удалил ui-bootstrap.js.

Ответ 5

Моя проблема заключалась в том, что я все еще включал шаблон-url в HTML, например:

<div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">

Это заставило мой браузер висеть - что странно, но так оно и было.

Итак, что я сделал:

bower install bootstrap --save
bower install angular-bootstrap --save

В моем index.html(обратите внимание на "-tpls" ):

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

Затем в моем Angular приложении:

angular
  .module('myApp', ['ui.bootstrap'])

Затем просто удалите шаблон-url в HTML:

<div uib-accordion-group class="panel-default" heading="Custom template">

Бум, работает.

Ответ 6

Вероятная причина этой проблемы - это принятый ответ, но одна из возможных причин этой проблемы - это то, с чем я столкнулся, и я хотел опубликовать ее, если кто-то другой столкнулся с одной и той же вторичной причиной проблемы.

Симптомы были точно такими же, 404 на шаблонах бутстрапа, но в моем случае я фактически включил javascript файл ui-bootstrap-tpls.min.js. Проблема в том, что я также включил версию без шаблона, "ui-bootstrap.min.js". Как только оба были включены, и я подозреваю, что порядок важен, можно сместить другое. В моем случае версия без шаблонов вытеснила шаблонную версию, вызывающую проблемы 404.

Как только я убедился, что ТОЛЬКО ВКЛЮЧАЕТ "ui-bootstrap-tpls.min.js", все работало, как ожидалось.

Ответ 7

Я должен сказать, что читаю комментарии и добавляю свой опыт с 10 часов прошлой ночью. Избегайте UI Bootstrap, кажется, гораздо больше усилий, чем его ценность.

Кроме того, прочитав свои репо-вопросы и комментарии, вся манера, в которой проект был проведен, по-видимому, противоречит простому и удобному в использовании инструменту. Хотя я уверен, что это началось с лучших намерений, возможно, это модуль, который можно избежать, если это вообще возможно.

Конечно, есть предостережение, это мнение, возможно, мы узнаем, что другие чувствуют то же самое.