Angulaire ui bootstrap directive modèle manquant

Question

Je suis en train de tester angulaire bootstrap-UI en local sur ma machine. Lorsque j'essaie de recréer l'exemple de l'accordéon et de la boîte de dialogue. Je reçois ce message d'erreur dans ma console en disant que le modèle est manquant.

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

Quand je regarde en ui-bootstrap-0.1.0.js la directive ont un modèle URL.

Quel est le but de l' templateURL pour la directive?

Sont ceux du modèle suppose d'être compris quand j'ai télécharger l'ensemble angulaire bootstrap-UI le fichier zip?

Je suis absente à d'autres fichiers que je devrais inclure dans ma 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>

Answer 1

Vous avez deux choix:

1. Si vous ne voulez pas faire vos propres modèles et veulent que le construit en, vous devez télécharger l' ui-bootstrap-tpls-0.1.0.js , ce qui injecte tous les modèles de sorte qu'ils sont pré-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 voulez faire une partie de vos propres modèles, créer un templates le dossier de votre application, et de télécharger les modèles de la angular-ui/bootstrap projet. Puis remplacer ceux que vous souhaitez personnaliser sur votre propre.

Lire la suite ici: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files

edit:

Vous pouvez également le télécharger bootstrap-tpls.js et encore remplacer certains de la directive templateUrls avec votre propre, en utilisant un AngularJS décorateur à modifier la directive templateUrl. Voici un exemple de changement du datepicker de templateUrl:

http://docs.angularjs.org/api/AUTO.$fournir des#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;
  });
});

Answer 2

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

1. Aller à http://angular-ui.github.io/bootstrap/ . Cliquez sur créer une version personnalisée et choisissez les fonctionnalités que vous utilisez. (Il n'y a pas de point de tirer 60k pour 1 point).
2. Inclure custom.tpls.js dans mon cas, c'était ui-bootstrap-custom-0.10.0.min.js
3. Dans votre Angulaire module interface utilisateur.bootstrap.yourfeature "dans mon cas, c'était" de l'interface utilisateur.bootstrap.modal'
4. ET NOTAMMENT 'l'interface utilisateur.bootstrap.npt' module complet dans mon cas était: var profil = angulaire.module"profil", ['interface utilisateur.routeur','angularFileUpload', 'ngAnimate','ui.bootstrap.modal','ui.bootstrap.npt']);
5. Enregistrer 2 heures et d'être heureux :-).

Answer 3

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

Si vous l'état de votre module de dépendance à n'être que " l'interface utilisateur.bootstrap.boîte de dialogue' au lieu de 'interface utilisateur.bootstrap', angulaire de la toux d'un modèle ne trouve pas d'erreur.

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

Answer 4

J'ai été confronté à la même erreur bien que dans mon index.html les deux scripts requis ont été définis. Enfin, j'ai changé l'ordre de chargement par la mise en ui-bootstrap.js script pour être chargé en premier, et le ui-bootstrap-tpls.js après comme ça. Qui a résolu le problème. Cependant, plus tard, Ive remarqué (comme indiqué ci-dessus) qu'un seul lib est nécessaire. J'ai donc enlevé le ui-bootstrap.js.