Время рисовать угловое меню

Question

У меня есть меню, в котором я иду с помощью «ng-repeat», чтобы нарисовать проблему, которая у меня есть, это то, что если вы сжигаете переменную с json из меню, которое расписано правильно, но если меню, поскольку потребление из WebAPI не нарисовало меня в полном объеме, меню как бы сначала нарисовало html-консультацию до конца WebAPI. Меню рисует меня правильно, но подменю (выпадающее меню) не рисует мне детей.

Они знают, как его решить?

Это меню

Это HTML

<div ng-controller="dashboardController" class="nav-wrapper"> 
    <ul ng-init="menuApp()"> 
     <li ng-repeat="item in menus" ng-init="$last && rebindDropDowns()" class="{{item.Submenu.length ? 'dropdown-button' : ''}}" ng-bind-html="item.Nombre" data-activates="{{item.Submenu.length ? 'administracion' : ''}}"> 
     {{item.Opcion}} 
     <ul ng-if="item.Submenu.length>0" id="administracion" class="dropdown-content"> 
      <li ng-repeat="subItem in item.Submenu"><a ng-href="{{subItem.Nombre}}">{{subItem.Descripcion}}</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 

И это контроллер

(function() { 
    'use strict'; 
    angular.module('gastosDeViaje').controller('dashboardController', ['$scope', 'dashboardService', 'accesoService', 'notificaService', 'legalizacionService', '$location', '$q', 
    function($scope, dashboardService, accesoService, notificaService, legalizacionService, $location, $q, men) { 
     $scope.menuApp = function() { 
     accesoService.consultaMenu(accesoService.authentication.userName).then(function(result) { 
      $scope.menus = result.data; 
      console.log(result); 
     }); 
     }; 
     $scope.rebindDropDowns = function() { 
     console.log('entro drop'); 
     $('.dropdown-button').dropdown(); 
     }; 
     $scope.menu = [{ 
     "Opcion": "Solicitud", 
     "Nombre": "<a href=\"#/solicitud\"><i class=\"material-icons left\">flight</i>Solicitud</a> ", 
     "Descripcion": "Formulario para Solicitud", 
     "Submenu": [] 
     }, { 
     "Opcion": "Consultas", 
     "Nombre": "<a href=\"#/consulta\"><i class=\"material-icons left\">search</i>Consultas</a> ", 
     "Descripcion": "Formulario para Consultas", 
     "Submenu": [] 
     }, { 
     "Opcion": "Transferencia", 
     "Nombre": "<a href=\"#/transferencia\"><i class=\"material-icons left\">attach_money</i>Transferencia</a> ", 
     "Descripcion": "Transferencia", 
     "Submenu": [] 
     }, { 
     "Opcion": "Administracion", 
     "Nombre": "<a class=\"dropdown-button\" data-activates=\"administracion\"><i class=\"material-icons left\">settings</i>Administracion<i class=\"material-icons right\">arrow_drop_down</i></a> ", 
     "Descripcion": "Menu de Administracion", 
     "Submenu": [{ 
      "Opcion": "Reservas", 
      "Nombre": "#/reservas ", 
      "Descripcion": "Reservas", 
      "Submenu": null 
     }, { 
      "Opcion": "Globales", 
      "Nombre": "#/globales ", 
      "Descripcion": "Globales", 
      "Submenu": null 
     }, { 
      "Opcion": "Convenios", 
      "Nombre": "#/convenios ", 
      "Descripcion": "Convenios", 
      "Submenu": null 
     }, { 
      "Opcion": "Aplicacion", 
      "Nombre": "#/aplicacion ", 
      "Descripcion": "Aplicacion", 
      "Submenu": null 
     }] 
     }]; 
     dashboardService.getEmpleadoAprobar(accesoService.authentication.userName).then(function(results) { 
     $scope.empleadosAprobar = results.data; 
     }, function() { //error 
     console.log('Error al Cargar los datos'); 
     }); 
     dashboardService.getEmpleadoAutorizar(accesoService.authentication.userName).then(function(results) { 
     $scope.empleadosAutorizar = results.data; 
     }, function() { //error 
     console.log('Error al cargar las autorizaciones'); 
     }); 
     dashboardService.getEmpleadolegalizar(accesoService.authentication.userName).then(function(results) { 
     $scope.empleadoLegalizar = results.data; 
     }, function() { //error 
     console.log('error al consultar'); 
     }); 
     dashboardService.getEmpleadoPdtLegalizarSub(accesoService.authentication.userName).then(function(results) { 
     $scope.PdtLegalizarSub = results.data; 
     }, function() { 
     console.log('Error al traer los pdtes por Legalizar'); 
     }); 
     dashboardService.getLegPdtAutorizar(accesoService.authentication.userName).then(function(result) { 
     $scope.LegPdtAutorizar = result.data; 
     }, function(error) { 
     console.log(error); 
     }); 
     dashboardService.getLegPdtAprobar(accesoService.authentication.userName).then(function(result) { 
     $scope.LegPdtAprobar = result.data; 
     }, function(error) { 
     console.log(error); 
     }); 
     dashboardService.getEmpleado(accesoService.authentication.userName).then(function(result) { 
     $scope.Nombre = result.data.Nombre; 
     }, function(error) { 
     if (!angular.isUndefined(error)) { 
      angular.forEach(error.data.ModelState.Model, function(errores) { 
      notificaService.error(errores); 
      }); 
     } 
     }); 
     dashboardService.solicitudesActivasEmpleado(accesoService.authentication.userName).then(function(result) { 
     $scope.solActivas = result.data; 
     }); 
     /*$scope.solicitudesActivasEmpleado = function(){ 
    console.log('entro activas'); 

    $scope.pagActual = 0; 
    $scope.pageZise = 3; 

    $q.all([ 
     dashboardService.solicitudesActivasEmpleado(accesoService.authentication.userName) 
    ]).then(function(results){ 
     $scope.solActivas = results[0].data; 
     $scope.numPaginas = function(){ 
     return Math.ceil($scope.solActivas.length/$scope.pageZise); 
     }; 
    }, function(error){ 
     console.log(error); 
    }); 
    };*/ 
     $scope.CambiaEstadoSol = function(id, documento, estado) { 
     var parametros = '?id=' + id + '&documento=' + documento + '&estado=' + estado + '&funLog=' + accesoService.authentication.userName; 
     dashboardService.putCambiaEstadoSol(parametros).then(function() { //results 
      $location.path('#/dashboard'); //Lo hago para que me actualice la lista de pendientes x aprobar 
      if (estado === 'A') { 
      notificaService.success('Solicitud Aprobada Exitosamente'); 
      } 
      if (estado === 'T') { 
      notificaService.success('Solicitud Autorizada Exitosamente'); 
      /*if (documento==='L') { 
       //legalizacionService.postLegalizarAndres 
      }*/ 
      } 
      if (estado === 'N') { 
      notificaService.success('Solicitud Anulada Exitosamente'); 
      } 
     }, function(error) { 
      error.data.ModelState.Model.forEach(function(data) { 
      notificaService.error(data); 
      }); 
     }); 
     }; 
     $scope.VerSolicitud = function(id) { 
     $location.path('/solicitud/' + id); 
     }; 
     $scope.LegalizarSolicitud = function(id) { 
     $location.path('/legalizacion/' + id + '/' + 'L'); 
     }; 
     $scope.CambiaEstadoLeg = function(id) { 
     $location.path('/legalizacion/' + id + '/' + 'A'); 
     }; 
    } 
    ]); 
    angular.module('gastosDeViaje').filter('paginacion', function() { 
    return function(input, start) { 
     if (!input || !input.length) { 
     return; 
     } 
     start = +start; 
     return input.slice(start); 
    }; 
    }); 
})(); 

Answer 1

Я сделал это изменение, и она работала: D

<div ng-controller="dashboardController" class="nav-wrapper"> 
    <ul ng-init="menuApp()"> 
    <li ng-repeat="item in menus" class="{{item.Submenu.length ? 'dropdown-button' : ''}}" ng-bind-html="item.Nombre" data-activates="{{item.Submenu.length ? 'administracion' : ''}}"> 
{{item.Opcion}} 
<ul ng-if="item.Submenu.length>0" id="administracion" class="dropdown-content"> 
    <li ng-repeat="subItem in item.Submenu" ng-init="$last && rebindDropDowns()"> 
    <a ng-href="{{subItem.Nombre}}">{{subItem.Descripcion}}</a> 
    </li> 
    </ul></li></ul></div> 

Answer 2

Проблема, кажется, на $('.dropdown-button').dropdown();, который вызывается из шаблона в <li ng-repeat="item in menus" ng-init="$last && rebindDropDowns()"..., но я не могу имитировать эту проблему.

Это происходит потому, что ng-init работает перед визуализацией html на DOM. Затем, когда вы применяете плагин jQuery, этот элемент еще не существует.

Кстати, использование встроенного контроллера jQuery не является хорошей идеей.

UPDATE 1

Попробуйте использовать директиву для инициализации JQuery плагинов следующим образом:

angular.module('gastosDeViaje').directive('dropdownButton', 
    function() { 
     return { 
     restrict: 'EAC', 
     link: function($scope, element, attrs, controller) { 

      jQuery(element).dropdown(); 
     } 
     }; 
    } 
); 

Это будет применяться директива для класса .dropdown-button.