Tengo una pequeña app desarrollada con las tecnologías AngularJS+ Symfony, en modo RESTAPI para el intercambio de datos. En su estructura tiene un menú lateral que se carga de un servicio (una lista de links que actúan hacia los estados de la app). El problema es que al cambiar de estados (renderizando los resultados en la vista ng-view) se recarga este menú lateral cada vez. O sea que en cada click a los elementos del menú cambia de estado y esa parte se vuelve a cargar. Qué puedo hacer para evitar esto?
function routeConfig($stateProvider) {
$stateProvider
.state('rute1', {
url: '/rute1',
templateUrl: 'pages/rute1.html',
controller: 'Rute1Controller'
});
$stateProvider
.state('rute2', {
url: '/rute2',
templateUrl: 'pages/rute2.html',
controller: 'Rute2Controller'
});
$stateProvider
.state('rute3', {
url: '/rute3',
templateUrl: 'pages/rute3.html',
controller: 'Rute3Controller'
});
}
Controlador del menú (el cual renderiza el resultado en un que está en aside.html):
(function() {
'use strict';
angular.module('app_aside')
.controller("asideController", asideController)
function asideController($http, $compile) {
var urlApi = "http://myapi.com/menu"
$http.get(urlApi)
.then(function(response) {
//set elements in #menu (aside.html)
$('#menu').html($compile(response)($scope));
});
}
});
Y en el aside.html:
<ul id="menu" class="sidebar-menu" ng-controller="asideController">
//aqui se muestra el resultado generado desde el controlador
//pero se recarga cada vez que cambio los estados
</ul>