Ui-bootstrap-tpls не удалось загрузить шаблон

Я унаследовал проект angular, и у него возникли проблемы с загрузкой модулей ui-bootstrap-tpls.

Для каждой директивы, которую он пытается использовать из бутстрапа, я получаю нечто похожее на следующее:

Ошибка: [$ compile: tpload] Не удалось загрузить шаблон: template/datepicker/popup.html

Я читал о необходимости включить в tpls версию ui-bootstrap lib. (ui-bootstrap-tpls-0.10.0.js(вместо ui-bootstrap.js)), но сделав это, а также каждую перестановку модуля, введенного в мой модуль в качестве зависимости (ui.bootstrap, ui.bootstrap. tpls, template/datepicker/datepicker.html '), но я не могу победить.

Здесь моя включает в себя:

<html class="no-js" ng-app="hiringApp">
<head>
    <meta charset="utf-8">
    <title>@ViewBag.Title</title>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="layout" content="IRLayout">

    <!-- styles IRLayout-->
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css">
    <!-- BootStrap -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- font-awesome -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="@Url.Content("~/content/css/layout.css")">
    <link rel="stylesheet" href="@Url.Content("~/content/css/normalize.css")">
    <link rel="stylesheet" href="@Url.Content("~/content/css/main.css")">
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/Upload.css")">

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/styles.css")">
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/site-specific.css")">
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/rating.css")">

    <!-- Upload -->
    @*<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Upload.css")">*@

    <!-- Header Scripts-->
    <!-- Jquery & Jquery UI -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script src="@Url.Content("~/Scripts/Vendor/underscore-min.js")"></script>

    <!-- BootStrap -->
    <!-- Validate -->
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>

    <!-- Analytics -->
    <script src="//cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js"></script>

    <!-- Angular -->
          <!--  
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js"></script>
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.min.js"></script>
          <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
            -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>

    <script src="@Url.Content("~/Scripts/app.js")"></script>
    <script src="@Url.Content("~/Scripts/controllers.js")"></script>
    <script src="@Url.Content("~/Scripts/directives.js")"></script>
    <script src="@Url.Content("~/Scripts/filters.js")"></script>
    <script src="@Url.Content("~/Scripts/services.js")"></script>
    <script>
        angular.module("hiringApp").constant("$userProvider", @Model.User.SystemRoles);
        angular.module("hiringApp").constant("$jobProvider", '');
    </script>

    <!-- Upload -->
    <script src="@Url.Content("~/content/js/plupload.full.js")"></script>
    <script src="@Url.Content("~/content/js/UploadImage.js")"></script>

    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
    <script src="~/Content/js/audio/irAudioRecorder.js"></script>
    @RenderSection("script", required: false)
</head>

Здесь мой модуль приложения:

var hiringApp = angular.module('hiringApp', ['ui.router', 'ngAnimate', 'ngResource', 'filters', 'ui.bootstrap', 'ui.bootstrap.tpls']);

Здесь ошибка:

GET http://localhost:54720/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:8539
7Error: [$compile:tpload] Failed to load template: template/tooltip/tooltip-popup.html
http://errors.angularjs.org/1.2.22/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:78:12
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:6900:17
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:8098:11
    at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
    at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
    at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11688:76
    at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12658:28)
    at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12470:31)
    at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12762:24)

Ответы

Ответ 1

Я просто хочу опубликовать решение для этой ошибки.

  • включает версию tpls ui.bootstrap

src= "активы/bower_components/ angular -bootstrap/щ-самозагрузки-tpls.js"

очевидно, что ни одна версия tpls не включает эти шаблоны.

  1. когда вы вводите его в свое приложение, убедитесь, что вы ввели ui.bootstrap, а не ui.bootstrap.modal

    angular.module( "shiftPlanner", ['ngResource', 'ngRoute', 'ui.bootstrap']);

для дополнительной информации rtfm;)

Ответ 2

У меня была очень похожая проблема, и я смог ее решить благодаря вашему комментарию, Гленн. Поэтому я хотел бы обобщить это на более общий ответ, который, надеюсь, будет полезен многим другим:

Если шаблоны UI Bootstrap не загружаются, и вы уже дважды проверили, что вы включили правый модуль из правого JS файла (и только он) в ваше приложение, проверьте, отключен ли/отключен кеш шаблона по какой-либо причине.

Есть несколько способов отключить или очистить кеш, и, возможно, вы не знаете, что это происходит вообще.

В моем случае модальные диалоги не открывались с сообщениями об ошибках типа Error: [$compile:tpload] Failed to load template: template/modal/backdrop.html.

Я начал с отличный проект шаблона, загруженный со страницы разработчика JBoss, в которой были следующие строки, включенные в определение приложения:

var xpApp = angular.module('kitchensink', ['ui.bootstrap',...])
.config(... {
    /*
     * Use a HTTP interceptor to add a nonce to every request to prevent MSIE from caching responses.
     */
    $httpProvider.interceptors.push('ajaxNonceInterceptor');
...

.factory('ajaxNonceInterceptor', function() {
// This interceptor is equivalent to the behavior induced by $.ajaxSetup({cache:false});

var param_start = /\?/;

return {
    request : function(config) {
        if (config.method == 'GET') {
            // Add a query parameter named '_' to the URL, with a value equal to the current timestamp
            config.url += (param_start.test(config.url) ? "&" : "?") + '_=' + new Date().getTime();
            }
            return config;
        }
    }
});

Как только я удалил перехватчик, появились модальные диалоги.

Ответ 3

У меня также была эта проблема, но я использовал только версию tils ui.bootstrap. В моем случае проблема была в модуле кэширования ngCacheBuster.

На вкладке сети я увидел, что в конце вызова ресурса есть параметр cachebuster:

/template/window.html?cb=4889764132

В этом случае bootstrap не заглядывал в свой шаблон, но решил загрузить файл из этого места, чего, конечно, не было.

Я решил это, переименовав все вызовы в папку шаблонов из механизма кэширования.

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

Ответ 4

убедитесь, что вы включили не только ui-bootstrap.js, но и ui-bootstrap-tpls.js

Ответ 5

Включите ui.bootstrap.tpls прямо под ui.bootstrap

Ответ 6

Для меня это был перехватчик, который вызывал ошибку, я должен был добавить код ниже, чтобы игнорировать вызовы, которые не были сделаны для моего api:

if (config.url.indexOf('templates/') == 0 || config.url.indexOf('uib/') == 0) 
{
   console.log('ignoring '+config.url);
   return config;
}

Ответ 7

Угу. Я решил эту проблему следующим образом.. и включив ui-bootstrap-tpls.js

angular.module('mainModule', ['ui.bootstrap', 'sub-module']);
angular.module('sub-module', ['ui.bootstrap.modal']);

Однако я не уверен, что другие проблемы, такие как шаблонное кэширование, вызовут проблему или нет. По крайней мере, не для меня..