son - link angularjs directive

Falta la plantilla de la directiva de arranque ui angular

Question

Actualmente estoy probando angular bootstrap-UI localmente en mi máquina. Cuando intento recrear el ejemplo de acordeón y cuadro de diálogo. Recibo este mensaje de error en mi consola diciendo que falta la plantilla.

Ejemplo de error: 404 Not Found - localhost / angular / template / message.html

Cuando miro en ui-bootstrap-0.1.0.js la directiva tiene una plantilla URL .

¿Cuál es el propósito de la templateURL para la directiva?

¿Se supone que esas plantillas se incluirán cuando descargue el archivo zip completo bootstrap-UI zip?

¿Me faltan otros archivos que debería haber incluido en mi encabezado?

<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

Debo decir que leí los comentarios y agregué mi experiencia de 10 horas de anoche. Evite UI Bootstrap, parece mucho más esfuerzo de lo que vale.

Además de haber leído sus problemas y comentarios sobre el repositorio, la manera en que se realizó el proyecto parece estar en desacuerdo con una herramienta simple y fácil de usar. Aunque estoy seguro de que comenzó con las mejores intenciones, quizás este sea un módulo para evitar si es posible.

Por supuesto, existe la advertencia de que esta es una opinión, quizás descubramos si otros sienten lo mismo.

Answer 2

Estaba enfrentando el mismo error, aunque en mi index.html se definieron ambos scripts necesarios. Finalmente, cambié el orden de carga estableciendo el script ui-bootstrap.js para que se cargue primero y el ui-bootstrap-tpls.js como este. Eso solucionó el problema. Sin embargo, más tarde noté (como se comentó anteriormente) que solo se requiere una lib. Así que eliminé el ui-bootstrap.js .

Answer 3

Este mensaje de error también parece ocurrir en otro escenario, como se demuestra aquí: http://plnkr.co/edit/aix6PZ?p=preview

Si declara que la dependencia de su módulo es solo ''ui.bootstrap.dialog'' en lugar de ''ui.bootstrap'', angular arroja un error de plantilla no encontrada.

Aquí hay una explicación oficial del ''por qué'': https://github.com/angular-ui/bootstrap/issues/266

Answer 4

La causa probable de este problema es la respuesta aceptada, pero otra posible causa de este problema es algo con lo que me encontré y quise publicar en caso de que alguien más se topara con la misma causa secundaria del problema.

Los síntomas eran exactamente los mismos, 404 en las plantillas de arranque, pero en mi caso incluí el archivo javascript ''ui-bootstrap-tpls.min.js''. El problema es que también incluí la versión sin plantilla, ''ui-bootstrap.min.js''. Una vez que ambos fueron incluidos, y sospecho que el orden era importante, uno desplazaría al otro. En mi caso, la versión sin plantilla desplazó a la versión con plantilla que causaba los problemas 404.

Una vez que me aseguré de SOLAMENTE INCLUIR ''ui-bootstrap-tpls.min.js'', todo funcionó como se esperaba.

Answer 5

Mi problema era que todavía estaba incluyendo la url de la plantilla en el HTML, así:

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

Esto causó que mi navegador se cuelgue, lo cual es extraño, pero así fue.

En resumen, lo que hice:

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

En mi index.html (tenga en cuenta "-tpls"):

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

Luego en mi aplicación Angular:

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

A continuación, simplemente elimine la plantilla-url en el HTML:

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

Boom, funciona.

Answer 6

Mis 5 centavos después de perder 2 horas con este problema. Debieras:

1. Vaya a http://angular-ui.github.io/bootstrap/ . Haga clic en crear una compilación personalizada y elija las funciones que usa. (No tiene sentido sacar 60k por 1 artículo).
2. Incluye custom.tpls.js en mi caso era ui-bootstrap-custom-0.10.0.min.js
3. En su módulo angular, incluya ''ui.bootstrap.yourfeature'' en mi caso fue ''ui.bootstrap.modal''

4. y también incluye ''ui.bootstrap.tpls'' . Entonces mi módulo completo de dependencias se ve así:

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

5. Ahorre 2 horas y sea feliz :-).

Answer 7

Tienes dos opciones:

1. Si no desea crear sus propias plantillas y desea las integradas, debe descargar el archivo ui-bootstrap-tpls-0.1.0.js ; esto inyecta todas las plantillas para que se almacenen en su aplicación: https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322

2. Si desea crear algunas de sus propias plantillas, cree una carpeta de templates en su aplicación y descargue las plantillas del proyecto angular-ui / bootstrap. Luego, sobrescriba los que desee personalizar por su cuenta.

Lea más aquí: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files

editar :

También puede descargar bootstrap-tpls.js y aún sobrescribir algunas de las plantillasUrls de la directiva con las suyas, usando un decorador AngularJS para cambiar la plantillaUrl de la directiva. Aquí hay un ejemplo de templateUrl del datepicker de change:

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;
  });
});