web-dev-qa-db-fra.com

Angular ui bootstrap manquant

Je teste actuellement angular bootstrap-UI localement sur ma machine. Lorsque j'essaie de recréer l'exemple de l'accordéon et de la boîte de dialogue. Ce message d'erreur s'affiche dans ma console et indique que le modèle est manquant.

Exemple d'erreur: 404 introuvable - localhost/angular/template/message.html

Quand je regarde dans ui-bootstrap-0.1.0.js la directive a un template URL.

Quel est le but de templateURL pour la directive?

Ces modèles sont-ils supposés être inclus lorsque je télécharge l’ensemble angular bootstrap-UI Fichier zip?

Me manque-t-il d'autres fichiers que j'aurais dû inclure dans mon en-tête?

<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>
angularjsangular-ui
55
iknowu2

Vous avez deux choix:

  1. Si vous ne souhaitez pas créer vos propres modèles et que vous souhaitez utiliser ceux intégrés, vous devez télécharger le fichier ui-bootstrap-tpls-0.1.0.js - il injecte tous les modèles de sorte qu'ils soient mis en cache dans votre application: https : //github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322

  2. Si vous souhaitez créer certains de vos propres modèles, créez un dossier templates dans votre application, puis téléchargez-les à partir du projet angular-ui/bootstrap. Ensuite, écrasez ceux que vous souhaitez personnaliser.

Lisez plus ici: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files

éditer :

Vous pouvez également télécharger bootstrap-tpls.js tout en écrasant certains des gabarits de la directive avec le vôtre, en utilisant un décorateur AngularJS pour modifier le gabarit de la directive. Voici un exemple templateUrl de ce changement de datepicker:

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;
  });
});
112
Andrew Joslin

Mes 5 cents après avoir perdu 2 heures avec ce problème. Vous devriez:

  1. Allez à http://angular-ui.github.io/bootstrap/ . Cliquez sur créer une construction personnalisée et choisissez les fonctionnalités que vous utilisez. (Il est inutile de tirer 60k pour 1 article).
  2. Inclure custom.tpls.js Dans mon cas c'était ui-bootstrap-custom-0.10.0.min.js
  3. Dans votre Angular angulaire, incluez 'ui.bootstrap.yourfeature' Dans mon cas, il s’agissait de 'ui.bootstrap.modal'

  4. et incluez également 'ui.bootstrap.tpls'. Ainsi, mes dépendances complètes de module ressemblent à ceci:

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

  5. Économisez 2 heures et soyez heureux :-).
67
Svitlana

Ce message d'erreur semble également se produire dans un autre scénario, comme illustré ici: http://plnkr.co/edit/aix6PZ?p=preview

Si vous déclarez que la dépendance de votre module est uniquement 'ui.bootstrap.dialog' au lieu de 'ui.bootstrap', angular tousse une erreur de modèle introuvable.

Voici une explication officielle du "pourquoi": https://github.com/angular-ui/bootstrap/issues/266

12
Rao

Je faisais face à la même erreur bien que dans mon index.html les deux scripts requis aient été définis. Enfin, j'ai changé l'ordre de chargement en définissant le script i-bootstrap.js à charger en premier et le i-bootstrap-tpls.js comme ça. Cela a résolu le problème. Cependant, plus tard, j'ai remarqué (comme indiqué ci-dessus) qu'une seule lib est nécessaire. J'ai donc supprimé le i-bootstrap.js.

9
stitakis

Mon problème était que je continuais d'inclure le template-url dans le HTML, comme ceci:

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

Cela a provoqué le blocage de mon navigateur - ce qui est étrange, mais c'était comme ça.

En résumé, ce que j'ai fait:

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

Dans mon index.html (notez les "-tpls"):

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

Puis dans mon Angular app:

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

Ensuite, supprimez simplement le template-url du HTML:

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

Boom, fonctionne.

1
maxpaj

La cause probable de ce problème est la réponse acceptée, mais une autre cause possible de ce problème est quelque chose que j'ai rencontré et que je voulais publier au cas où quelqu'un d'autre rencontrerait la même cause secondaire du problème.

Les symptômes étaient exactement les mêmes, 404 sur les modèles bootstrap mais dans mon cas, j’ai inclus le fichier javascript 'ui-bootstrap-tpls.min.js'. Le problème est que j’ai également inclus la version non-template, 'ui-bootstrap.min.js'. Une fois les deux incluses, et je suppose que l'ordre était important, l'une déplacerait l'autre. Dans mon cas, la version non-template a déplacé la version basée sur un modèle, causant les problèmes 404 .

Une fois, je me suis assuré d'inclure UNIQUEMENT les 'ui-bootstrap-tpls.min.js' qui ont fonctionné comme prévu.

0
Zavier R

Je dois dire en lisant les commentaires et en ajoutant mon expérience de 10 heures hier soir. Évitez l'interface utilisateur Bootstrap il semble beaucoup plus d'effort que sa valeur.

En outre, après avoir lu toutes les questions relatives aux pensions et leurs commentaires, la manière dont le projet a été mené semble être en contradiction avec un outil simple et facile à utiliser. Bien que je sois sûr que cela ait commencé avec les meilleures intentions du monde, il s’agit peut-être d’un module à éviter dans la mesure du possible.

Bien sûr, il y a la mise en garde qui est un avis, peut-être que nous verrons si les autres ressentent la même chose.

0
David Anderton