是时候绘制 angularjs 菜单了

Question

我有一个菜单，我用 "ng-repeat" 来绘制我遇到的问题是，如果你用正确绘制的菜单中的 json 刻录一个变量，但是如果菜单作为 WebAPI 的消费没有画我完整，菜单好像是在 WebAPI 结束之前先画 html 咨询。菜单正确地描绘了我，但子菜单（下拉菜单）没有描绘我 children。

他们知道怎么解决吗？

这是菜单

这是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

问题似乎出在从 <li ng-repeat="item in menus" ng-init="$last && rebindDropDowns()"... 中的模板调用的 $('.dropdown-button').dropdown(); 上，但我无法模拟此问题。

发生这种情况是因为 ng-init 在 DOM 上呈现 html 之前运行。然后当你应用 jQuery 插件时，该元素还不存在。

顺便说一句，在控制器内部使用 jQuery 根本不是一个好主意。

更新 1

尝试使用指令来初始化 jQuery 插件，如下所示：

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

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

这将为 class .dropdown-button 应用指令。

Answer 2

我进行了此更改并且有效：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>

是时候绘制 angularjs 菜单了

Time to paint angularjs menu

javascript

json

materialize

asp.net-web-api

angularjs