ng-repeat 和 Mmenu 子菜单

Posted 2023-05-08

【中文标题】ng-repeat 和 Mmenu 子菜单

【英文标题】：ng-repeat and Mmenu submenu

【发布时间】：2016-05-03 21:48:24

【问题描述】：

我正在从一个包含子菜单的 JSON 文件构建一个菜单。我正在使用一个名为 JQuery.mmenu 的插件。当我使用原始 html 创建子菜单时，它可以正常工作：（运行代码查看）

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

.config(['$routeProvider',
  function($routeProvider) 
    //determines redirects go via shortcuts, clicking on the management icon on the main page sends the routeProvider /MG which it then uses to pull the relevant HTML file
    $routeProvider
      .when('/', 
        controller: 'projectController',
        templateUrl: './assets/html/home.html'
      )
      .when('/t1', 
        controller: 'projectController',
        templateUrl: './assets/html/temp1.html'
      )
      .when('/t2', 
        controller: 'projectController',
        templateUrl: './assets/html/temp2.html'
      )
      .when('/t3', 
        controller: 'projectController',
        templateUrl: './assets/html/temp3.html'
      )

    .otherwise(
      controller: 'projectController',
      templateUrl: './assets/html/home.html'
    )
  
]);

app.controller('projectController', function projectController($scope, $http, $rootScope, $timeout) 
  $scope.projectInfo = [];
  $scope.menuInfo = [];
  $http.get('config/Config.json').then(function(response) 
    $scope.projectInfo = response.data[0].config;
    $scope.menuInfo = response.data[1].menu;
  );

  // $scope.activeID = 'HM';
  // $scope.activePath = "Assets/images/allActive.png";

  // function getImgPath(item) 
  //     $scope.activePath = "Assets/images/" + item.path + "";
  //     console.log($scope.activePath);
  // 


  $scope.setImgPath = function(btnPath) 
    console.log(btnPath)
    $scope.activePath = "Assets/images/" + btnPath + "";
    console.log($scope.activePath);
  ;
  $scope.contentCtrl = function(id) 
    $scope.activeID = id;
    console.log($scope.activeID);
    // $scope.activeItem = item;
    // getImgPath($scope.activeItem);


  ;


);

/* Helvetica Font */

@font-face 
  font-family: HelveticaNeue;
  src: local('0'), url('../fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), url('../fonts/HelveticaNeueLTStd-Lt.otf') format('otf');

/* Global and Overrides */

body,
html 
  font-family: Helvetica, Arial, sans-serif;
  overflow: none;
  color: #FFF;

body 
  background: #303030;

#header 
  background: #212121;
  height: 96px;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  border: 0;
  top: 0px;
  width: 100%;

#content 
  height: 100%;

#footer 
  background: #212121;
  height: 72px;
  box-shadow: 0 -1.5px 4px rgba(0, 0, 0, 0.24), 0 -1.5px 6px rgba(0, 0, 0, 0.12);
  border: 0;
  bottom: 0px;
  position: fixed;
  width: 100%;

.fa 
  color: #8ea5d0;
  font-size: 36px;
  cursor: pointer;
  display: inline-block;
  padding-top: 30px;
  padding-left: 30px;

.fa:hover 
  color: #627EB0;

.fa:active 
  color: #415E95;

a:focus 
  outline: 0 none;
  color: #627EB0;
  text-decoration: none;

.title 
  float: right;
  margin-right: 6.5%;
  padding-top: 35px;
  font-size: 32px;

.info_btn 
  position: absolute;
  color: #FFF !important;
  background-color: #8ea5d0;
  font-size: 40px;
  font-weight: 400;
  right: 30px;
  top: 48px;
  border-radius: 50px;
  padding: 0 21.8px;
  font-size: 20px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
  line-height: 48px;
  position: absolute;
  top: 72px;
  right: 1.6%;

.info_btn:hover 
  background-color: #627EB0;

.info_btn:active 
  background-color: #415E95;
  color: #FFF;
  text-decoration: none;

.info_btn:hover,
.info_btn:visited,
.info_btn:link,
.info_btn:active 
  text-decoration: none;
  color: #FFF;

.menuBtn 
  background-color: transparent;
  display: inline-flex;
  cursor: pointer;
  color: #ffffff;
  border: #212121;
  border-bottom-style: solid;
  border-width: 1px;
  width: 100%;
  font-size: 17px;
  padding: 10px 10px;
  -webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
  -moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
  -o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
  transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
  outline: none;

/*  causes the color to change when you hover over a button of class myButton */

.menuBtn:hover 
  background-color: #333333;
  outline: none;

.menuBtn:active 
  position: relative;
  background-color: #222222;
  outline: none;

.revNum 
  font-size: 16px;
  position: absolute;
  bottom: 25px;
  left: 12px;

.footer_info 
  bottom: 25px;
  position: absolute;
  margin: 0px auto;
  width: 100%;
  font-size: 18px;
  display: block;
  text-align: center;

.logo 
  height: 48px;
  position: absolute;
  bottom: 12px;
  right: 12px;

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/css/jquery.mmenu.all.css" rel="stylesheet" />
  <link rel="stylesheet" media="screen and (max-width: 480px)" href="assets/css/mobileStyle.css" type="text/css" />
  <link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 1024px)" href="assets/css/tabletStyle.css" type="text/css" />
  <link rel="stylesheet" media="screen and (min-width: 1025px)" href="assets/css/desktopStyle.css" type="text/css" />
  <link rel="apple-touch-icon" href="thumb.png">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.angularjs.org/1.5.0-rc.1/angular-route.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.1/js/jquery.mmenu.all.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function($) 
      $("#menu").mmenu(
        "slidingSubmenus": false,
        "counters": true,
        offCanvas: 
          position: "left",
          zposition: "front"
        
      );
    );
  </script>
</head>

<body ng-app="myApp" ng-controller="projectController">
  <title>projectInfo.title</title>
  <div id="wrapper">
    <div id="header">
      <a href="#menu" class="menu-link push fa fa-navicon">click here</a>
      <a class="fa fa-home" ng-href="#/home"></a>
      <span class="title">projectInfo.title</span>
      <a href class="info_btn"><span>i</span></a>
      <nav id="menu">
        <ul>
          <li><a href="/">Home</a>
          </li>
          <li><span>About us</span>
            <ul>
              <li><a href="/about/history">History</a>
              </li>
              <li><a href="/about/team">The team</a>
              </li>
              <li><a href="/about/address">Our address</a>
              </li>
            </ul>
          </li>
          <li><a href="/contact">Contact</a>
          </li>
        </ul>
      </nav>
    </div>
    <div ng-view id="content">
    </div>
    <div id="footer">
      <div class="revNum">Revision: projectInfo.version</div>
      <div class="footer_info">projectInfo.footer</div>
      <img class="logo" ng-src="./assets/images/projectInfo.logo">
    </div>
  </div>
</body>

</html>

这正是我想要的样子，但现在当我尝试完全相同的结构但使用 ng-repeat 从我的 json 文件中提取时，我得到了这个：

<nav id="menu">
                <ul>
                    <li ng-repeat="item in menuInfo"> <a class="menuBtn" ng-href="#/item.id" href ng-click="contentCtrl(item.id)">item.name</a >
                        <ul>
                            <li><a class="menuBtn" href="/about/history">History</a></li>
                            <li><a class="menuBtn" href="/about/team">The team</a></li>
                            <li><a class="menuBtn" href="/about/address">Our address</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>

产生这个（到达这里的相同步骤）：

并且这些菜单不能折叠。现在我能看到的唯一区别实际上是 ng 重复，当我把它拿出来时，一切似乎都正常。我不知道为什么会发生这种情况。任何帮助将不胜感激。

【问题讨论】：

你能创建一个plunker吗？

抱歉，我之前尝试制作了一个但遇到了问题，我得到了“正确”版本的工作，但我无法让我的 ng-repeat 版本工作，因为我不知道如何包含我的 JSON 文件它从中拉出。

【参考方案1】：

最可能的问题是初始化脚本位于$(document).ready() 中，但这在 Angular 页面中是毫无价值的，因为在此之后 Angular 构建了大部分 dom。

您需要创建一个指令来初始化插件。如果插件依赖于所有存在的项目，在初始化之前还需要在指令中的 ng-repeat 中侦听$last

在指令中初始化 jQuery 插件的基础知识在网络搜索中并不难找到。如果遇到更多问题，可以随时在这里提问

【讨论】：

我会尽快解决这个问题，但只是为了确保我理解，你的意思是 ng-repeat 在插件加载之前运行？

no...$(document).ready() 在 Angular 有时间创建元素之前运行...尤其是在需要加载模板时

另一种可能性是检查是否存在角度模块包装器

好的，我可以通过在函数中添加超时来测试它还是无论如何都不起作用？我只是问，因为我从未使用过指令，所以我可能需要一段时间才能将一个指令放在一起，我想知道它会起作用:)

最好是……很难说需要什么精确的时间。您也可以在 aangular 中使用$timeout，它将推送到下一个摘要