3

Estuve viendo videos para aprender el angularjs para paginas web , me encontre un problema con el ng-include, no se si esta bien la manera o el video es antiguo, mi código es:

Index.html:

<div ng-include="menuSuperior"></div>

app.js:

var app = angular.module('universidadApp',['ngRoute']);

app.controller('mainCtrl', ['$scope','$http', function($scope,$http){

$scope.menuSuperior = "parciales/menu.html";

}]);

Y el codigo html que quiero incluir que esta en la carpeta parciales y se llama menu.html:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Universidad App</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#/">Inicio</a></li>
            <li><a href="#/profesores">Profesores</a></li>
            <li><a href="#/alumnos">Alumnos</a></li>
          </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
2
  • 1
    Y cual es el problema? el 25 jun. 2018 a las 18:46
  • Tambien seria bueno saber la estructura de ficheros que tienes (respecto a menu.html, Index.html y app.js) para revisar que se este incluyendo correctamente. el 25 jun. 2018 a las 18:48

1 respuesta 1

0

A pesar de llegar tarde a esta pregunta, me gustaria comentarle algunas soluciones para este problema. Primero no le recomiendo usar variables en el Controlador porque las llamadas del $scope.$apply() le puede traer grandes dolores de cabeza por la sobre saturacion de llamadas a este evento, por cierto evitar la llamada de estos eventos, no son posibles en estos escenarios hasta donde conozco y si alguien conoce seria genial aprender.

Solucion 1:

Index.html

<div ng-include="'./parciales/menu.html'"></div>

Solucion 2:

Index.html

<script type="text/ng-template" id="menuSuperior">
    <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Universidad App</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#/">Inicio</a></li>
            <li><a href="#/profesores">Profesores</a></li>
            <li><a href="#/alumnos">Alumnos</a></li>
          </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
</script>

<div ng-include="'menuSuperior'"></div>

En esta solucion esta definiendo un template(plantilla) en el mismo Index.html lo que le permite crear tantos templates como necesite.

Ahora la solucion que en lo personal encuentro mas efectiva, crear una directiva que maneje esta funcionalidad.

Solucion 3:

menu-directive.js

app.directive('menuSuperior', function($compile){
  return {
    restrict: 'E',
    scope: {
      menu: '='
    },
    template: '<div>'+
              '  <span>Hola menu {{menu}}!</span>'+
              '  <button ng-click="insertaHtml()">Prueba</button>'+
              '</div>',
    link: function(scope, element, attrs) {
       scope.insertaHtml = function() {
         var htmlContenedor = angular.element('<div ng-include="\'./parciales/menu.html\'"></div>');
         element.before($compile(htmlContenedor)(scope));
       }
    }
  }
})

Uso

<menu-superior menu="Menu de Helados"><menu-superior>

Esta solucion refinada le permite crear su propia libraria de componentes y favorece la reutilizacion.

Nota: menu: '=', no es necesario agregarlo, por motivos educativos lo agregue para que tenga la idea de que puede inyectar valores.

Saludos, espero esta solucion le ayude con su problema

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.