javascript - div - ng-include not working
Angular JS: incluye HTML parcial dentro de otra ng-include (1)
Estoy usando un index.html creado con Yeoman, que se ve así:
<html>
<head>...</head>
<body>
<div ng-include="''views/main.html''"></div>
</body>
</html>
Ahora, sé que no puedo usar un ng-include dentro de otro ng-include , así que ni siquiera intento eso, pero ese es el objetivo que quiero lograr.
Estoy usando ui.router en mi main.html para las vistas anidadas, pero no puedo hacer algo como esto:
<header class="header">
<!-- Rather long HTML code that I would like to put in
a separate file like ''views/parts/header.html'' -->
</header>
<div ui-view="" class="container"></div>
Una solución ingenua sería eliminar el primer ng-include y usarlo en main.html para encabezado, pie de página y cosas por el estilo.
Entonces, ¡dame con lo que tienes, pero no con eso!
Editar: esto es lo que me gustaría tener (pero no puedo, ya que estoy dentro de un ng-include )
<div ng-include="''views/parts/header.html''"></div>
<div ui-view="" class="container"></div>
Si te entiendo bien, todo es posible. Como se describe aquí:
- stateprovider en angularjs - no representa la vista de usuario
- y se muestra aquí en este plunker
Al final, podemos usar ambos mundos, pero tenemos que hacer una cosa más:
app.controller(''MainCtrl'', function($scope, $state, ....){
$state.go("/");
});
Porque el inicio ng-include y ui-router no coinciden. Tenemos que forzar la recarga del estado una vez que el objetivo (es decir, el contenido de nuestro <div ng-include="''views/main.html''"></div> ) esté disponible.
NOTA: esperando el contenido de main.html como este:
<div ng-controller="MainCtrl">
...
<div ui-view></div>
</div>
Eso debería resolver el problema ...
AMPLIAR: ¿Cómo volver a incluir?
La potencia del ui-router aquí parece ser ilimitada. Podemos * (re) * usar ng-include nuevamente, dentro de ui-view . Entonces en vez de esto:
<div ng-include="''views/parts/header.html''"></div>
<div ui-view="" class="container"></div> // e.g. filled by content.html
Podemos mover el encabezado a la vista en sí misma content.html
<div>
<div ng-include="''views/parts/header.html''"></div>
</div>
Observen eso aquí