时间画画angularjs菜单 [英] Time to paint angularjs menu

查看：229 发布时间：2016/5/10 20:03:44 javascript angularjs json asp.net-web-api materializecss

本文介绍了时间画画angularjs菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有我走菜单中的NG重复画画是我的问题是，如果你燃烧与所绘制正确菜单中的JSON变量，但是如果菜单从消费的WebAPI不画我完成，菜单仿佛的WebAPI结束前先绘制HTML咨询。
菜单画我正确，但子菜单（下拉）不画我的孩子。

他们知道如何解决呢？

这是菜单

这是HTML

 ＆LT; DIV NG控制器=dashboardController级=NAV-包装＆GT;
    ＆LT; UL NG-的init =menuApp（）＆GT;
      ＆LT;李NG重复=项中的菜单NG-的init =$最后和放大器;＆安培; rebindDropDowns（）级={{item.Submenu.length下拉按钮'：''}}NG -bind-HTML =item.Nombre数据激活={{item.Submenu.length'administracion'：''}＆GT;
        {{item.Opcion}}
        ＆所述;微升纳克-如果=item.Submenu.length大于0ID =administracion类=下拉内容＆GT;
          ＆LT;李NG重复=子项中item.Submenu＆GT;＆LT;一个NG-HREF ={{subItem.Nombre}}＆GT; {{subItem.Descripcion}}＆LT; / A＆GT;＆LT; /李＆GT ;
        ＆LT; / UL＆GT;
      ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
  ＆LT; / DIV＆GT;

这是控制器

 （函数（）{
  使用严格的;
  angular.module（'gastosDeViaje'）。控制器（'dashboardController'，['$范围，dashboardService'，'accesoService'，'notificaService'，'legalizacionService'，'$的位置，$ Q'，
    功能（$范围，dashboardService，accesoService，notificaService，legalizacionService，$位置，$ Q，男）{
      $ scope.menuApp =功能（）{
        accesoService.consultaMenu（accesoService.authentication.userName）。然后（功能（结果）{
          $ scope.menus = result.data;
          的console.log（结果）;
        }）;
      };
      $ scope.rebindDropDowns =功能（）{
        的console.log（'ENTRO降）;
        $（'下拉按钮'）下拉列表（）。
      };
      $ scope.menu = [{
        Opcion：Solicitud，
        农布雷：＆所述; A HREF = \\＃/ solicitud \\＆GT;＆下; I类= \\材料图标向左\\＆GT;飞行＆下; / I GT; Solicitud＆下; / A＆gt;中，
        Descripcion：Formulario段Solicitud，
        子菜单：[]
      }，{
        Opcion：Consultas，
        农布雷：＆LT; A HREF = \\＃/ CONSULTA \\＆GT;＆LT; I类= \\材料的图标左\\＆GT;搜索和LT; / I＆GT; Consultas＆LT; / A＆gt;中，
        Descripcion：Formulario段Consultas，
        子菜单：[]
      }，{
        Opcion：Transferencia，
        农布雷：＆所述; A HREF = \\＃/ transferencia \\＆GT;＆下; I类= \\材料图标向左\\＆GT; attach_money＆下; / I GT; Transferencia＆下; / A＆gt;中，
        Descripcion：Transferencia，
        子菜单：[]
      }，{
        Opcion：Administracion，
        农布雷：＆LT;一类= \\下拉按钮\\数据激活= \\administracion \\＆GT;＆LT; I类= \\材料的图标左\\＆gt;设置＆LT; / I＆GT; Administracion＆LT; I类= \\材料的图标右\\＆GT; arrow_drop_down＆LT; / I＆GT;＆LT; / A＆gt;中，
        Descripcion：菜单德Administracion
        子菜单：[{
          Opcion：RESERVAS，
          农布雷：＃/饭店预订
          Descripcion：RESERVAS，
          子菜单：空
        }，{
          Opcion：GLOBALES，
          农布雷：＃/ GLOBALES
          Descripcion：GLOBALES，
          子菜单：空
        }，{
          Opcion：Convenios，
          农布雷：＃/ convenios
          Descripcion：Convenios，
          子菜单：空
        }，{
          Opcion：Aplicacion，
          农布雷：＃/ aplicacion
          Descripcion：Aplicacion，
          子菜单：空
        }]
      }];
      dashboardService.getEmpleadoAprobar（accesoService.authentication.userName）。然后（功能（结果）{
        $ scope.empleadosAprobar = results.data;
      }，函数（）{//错误
        的console.log（'错误人Cargar洛杉矶DATOS'）;
      }）;
      dashboardService.getEmpleadoAutorizar（accesoService.authentication.userName）。然后（功能（结果）{
        $ scope.empleadosAutorizar = results.data;
      }，函数（）{//错误
        的console.log（'错误人cargar拉斯autorizaciones'）;
      }）;
      dashboardService.getEmpleadolegalizar（accesoService.authentication.userName）。然后（功能（结果）{
        $ scope.empleadoLegalizar = results.data;
      }，函数（）{//错误
        的console.log（'错误人consultar'）;
      }）;
      dashboardService.getEmpleadoPdtLegalizarSub(accesoService.authentication.userName).then(function(results) {
        $ scope.PdtLegalizarSub = results.data;
      }，函数（）{
        的console.log（'错误人traer洛杉矶pdtes POR Legalizar'）;
      }）;
      dashboardService.getLegPdtAutorizar（accesoService.authentication.userName）。然后（功能（结果）{
        $ scope.LegPdtAutorizar = result.data;
      }，功能（错误）{
        的console.log（错误）;
      }）;
      dashboardService.getLegPdtAprobar（accesoService.authentication.userName）。然后（功能（结果）{
        $ scope.LegPdtAprobar = result.data;
      }，功能（错误）{
        的console.log（错误）;
      }）;
      dashboardService.getEmpleado（accesoService.authentication.userName）。然后（功能（结果）{
        $ scope.Nombre = result.data.Nombre;
      }，功能（错误）{
        如果（！angular.isUndefined（错误））{
          angular.forEach（error.data.ModelState.Model，功能（errores）{
            notificaService.error（errores）;
          }）;
        }
      }）;
      dashboardService.solicitudesActivasEmpleado(accesoService.authentication.userName).then(function(result) {
        $ scope.solActivas = result.data;
      }）;
      /*$scope.solicitudesActivasEmpleado =功能（）{
    的console.log（'ENTRO activas'）;    $ scope.pagActual = 0;
    $ scope.pageZise = 3;    $ q.all（[
      dashboardService.solicitudesActivasEmpleado（accesoService.authentication.userName）
    ]）。然后（功能（结果）{
      $ scope.solActivas =结果[0]。数据;
      $ scope.numPaginas =功能（）{
        返回Math.ceil（$ scope.solActivas.length / $ scope.pageZise）;
      };
    }，功能（错误）{
      的console.log（错误）;
    }）;
  }; * /
      $ scope.CambiaEstadoSol =功能（ID，这份执行，埃斯塔）{
        VAR parametros = + ID +'号=？''和;这份执行='+ +这份执行'和;埃斯塔='+埃斯塔+'和; funLog ='+ accesoService.authentication.userName;
        dashboardService.putCambiaEstadoSol（parametros）。然后（函数（）{//结果
          $ location.path（'＃/仪表盘）; //罗哈戈对阙我actualice拉LISTA德pendientes点¯xaprobar
          如果（埃斯塔==='A'）{
            notificaService.success（'Solicitud Aprobada Exitosamente'）;
          }
          如果（埃斯塔==='T'）{
            notificaService.success（'Solicitud Autorizada Exitosamente'）;
            / *如果（===这份执行'L'）{
              //legalizacionService.postLegalizarAndres
            } * /
          }
          如果（埃斯塔==='N'）{
            notificaService.success（'Solicitud Anulada Exitosamente'）;
          }
        }，功能（错误）{
          error.data.ModelState.Model.forEach（功能（数据）{
            notificaService.error（数据）;
          }）;
        }）;
      };
      $ scope.VerSolicitud =功能（ID）{
        $ location.path（'/ solicitud /'+ ID）;
      };
      $ scope.LegalizarSolicitud =功能（ID）{
        $ location.path（'/ legalizacion /+ ID +'/'+'L'）;
      };
      $ scope.CambiaEstadoLeg =功能（ID）{
        $ location.path（'/ legalizacion /+ ID +'/'+'A'）;
      };
    }
  ]）;
  angular.module（'gastosDeViaje'）。过滤器（'paginacion'，函数（）{
    返回功能（输入，启动）{
      如果（！输入||！input.length）{
        返回;
      }
      开始= +启动;
      返回input.slice（开始）;
    };
  }）;
}）（）;

解决方案

我做了这个变化和它的工作：D

 ＆LT; DIV NG控制器=dashboardController级=NAV-包装＆GT;
   ＆LT; UL NG-的init =menuApp（）＆GT;
     ＆LT;李NG重复=项中的菜单级={{item.Submenu.length下拉按钮'：''}}NG绑定-HTML =item.Nombre数据激活= {{item.Submenu.length'administracion'：''}}＆GT;
{{item.Opcion}}
＆所述;微升纳克-如果=item.Submenu.length大于0ID =administracion类=下拉内容＆GT;
    ＆LT;李NG重复=子项中item.SubmenuNG-的init =$最后和放大器;＆安培; rebindDropDowns（）＆GT;
    ＆下;一个纳克-HREF ={{subItem.Nombre}}＆GT; {{subItem.Descripcion}}＆下; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT; / UL＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;＆LT; / DIV＆GT;

I have a menu that I walk with a "ng-repeat" to paint the problem that I have is that if you burn a variable with the json from the menu that is painted correctly, but if the menu as consumption from a WebAPI not paint me complete, menu is as if first paint the html consultation before the end of the WebAPI. The menu paints me correctly, but a submenu (dropdown) does not paint me children.

They know how to solve it?

This is the menu

This is the 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>

And this is the Controller

(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);
    };
  });
})();

解决方案

I made this change and it worked: 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菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

时间画画angularjs菜单 [英] Time to paint angularjs menu

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

时间画画angularjs菜单 [英] Time to paint angularjs menu

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭