ng-repeat 和 Mmenu 子菜单
ng-repeat and Mmenu submenu
我正在从包含子菜单的 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 重复,当我把它拿出来时,一切似乎都正常。我不知道为什么会发生这种情况。任何帮助将不胜感激。
最有可能的问题是初始化脚本在 $(document).ready()
中,但在 angular 页面中毫无价值,因为 angular 在此之后构建了大部分 dom发生。
您需要创建一个指令来初始化插件。如果插件依赖于存在的所有项目
,则在初始化之前还需要在指令中的 ng-repeat 中侦听 $last
在指令中初始化 jQuery 插件的基础知识在网络搜索中并不难找到。如果您运行遇到更多麻烦
,可以随时在这里提问
我正在从包含子菜单的 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 重复,当我把它拿出来时,一切似乎都正常。我不知道为什么会发生这种情况。任何帮助将不胜感激。
最有可能的问题是初始化脚本在 $(document).ready()
中,但在 angular 页面中毫无价值,因为 angular 在此之后构建了大部分 dom发生。
您需要创建一个指令来初始化插件。如果插件依赖于存在的所有项目
,则在初始化之前还需要在指令中的 ng-repeat 中侦听$last
在指令中初始化 jQuery 插件的基础知识在网络搜索中并不难找到。如果您运行遇到更多麻烦
,可以随时在这里提问