我试图在使用离子侧菜单的应用中使用收集重复列表。当我不使用菜单时，收集重复似乎有效。当我使用菜单时，集合重复不会在屏幕上显示任何内容（尽管我可以在浏览器开发工具中看到它添加到页面中的项目。）
这两种离子元素是否彼此不相容？
以下是两个例子：
没有离子菜单（工作）
<html ng-app="contactsApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Collection-Repeat: Early Preview</title>
<link href="http://code.ionicframework.com/1.0.0-beta.9/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.js"></script>
<style type="text/css" media="screen">
.list .my-item.item {
left: 0;
right: 0;
padding-top: 0;
padding-bottom: 0;
}
</style>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">3000 Contacts</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a class="item my-item"
collection-repeat="item in contacts"
collection-item-height="getItemHeight(item)"
collection-item-width="'100%'"
ng-href="https://www.google.com/#q={{item.first_name + '+' + item.last_name}}"
ng-style="{'line-height': getItemHeight(item) + 'px'}">
{{item.letter || (item.first_name+' '+item.last_name)}}
</a>
</div>
</ion-content>
<script type="text/javascript" charset="utf-8">
angular.module('contactsApp', ['ionic'])
.controller('MainCtrl', function($scope, $ionicScrollDelegate, filterFilter) {
$scope.contacts = window.CONTACTS;
$scope.getItemHeight = function(item) { return 100; };
});
window.CONTACTS = [{"id":1,"first_name":"Patrick","last_name":"Rogers","country":"Cyprus","ip_address":"153.88.89.148","email":"progers@yata.net"},
{"id":2,"first_name":"Janet","last_name":"Gordon","country":"Croatia","ip_address":"209.73.121.212","email":"jgordon@skivee.biz"},
{"id":3,"first_name":"Kathy","last_name":"Hamilton","country":"Armenia","ip_address":"164.214.217.162","email":"khamilton@rhynyx.biz"},
{"id":4,"first_name":"Stephanie","last_name":"Johnson","country":"Mauritius","ip_address":"8.199.242.67","email":"sjohnson@jabbertype.mil"},
{"id":5,"first_name":"Jerry","last_name":"Palmer","country":"Thailand","ip_address":"230.207.100.163","email":"jpalmer@avamm.org"},
{"id":6,"first_name":"Lillian","last_name":"Franklin","country":"Germany","ip_address":"150.190.116.1","email":"lfranklin@eare.mil"},
{"id":7,"first_name":"Melissa","last_name":"Gordon","country":"Serbia","ip_address":"162.156.29.99","email":"mgordon@flashset.org"},
{"id":8,"first_name":"Sarah","last_name":"Burns","country":"Grenada","ip_address":"13.177.156.223","email":"sburns@eimbee.info"},
{"id":9,"first_name":"Willie","last_name":"Burton","country":"Croatia","ip_address":"115.133.81.82","email":"wburton@dynazzy.info"},
{"id":10,"first_name":"Tina","last_name":"Simmons","country":"United States Virgin Islands","ip_address":"113.49.63.18","email":"tsimmons@devpulse.mil"},
{"id":11,"first_name":"Kenneth","last_name":"Larson","country":"Mexico","ip_address":"92.89.76.196","email":"klarson@browseblab.info"},
{"id":12,"first_name":"Philip","last_name":"Welch","country":"Cuba","ip_address":"223.180.48.70","email":"pwelch@skippad.edu"},
{"id":13,"first_name":"Nicholas","last_name":"Parker","country":"British Indian Ocean Territory","ip_address":"200.150.119.13","email":"nparker@twitternation.net"},
{"id":14,"first_name":"Nicole","last_name":"Webb","country":"Moldova","ip_address":"47.66.237.205","email":"nwebb@midel.biz"},
{"id":15,"first_name":"Clarence","last_name":"Schmidt","country":"China","ip_address":"134.84.246.67","email":"cschmidt@dazzlesphere.net"},
{"id":16,"first_name":"Jessica","last_name":"Murray","country":"Sao Tome and Principe","ip_address":"211.30.32.109","email":"jmurray@jumpxs.net"},
{"id":17,"first_name":"Willie","last_name":"Schmidt","country":"US Minor Outlying Islands","ip_address":"158.40.109.208","email":"wschmidt@babbleset.edu"},
{"id":18,"first_name":"Margaret","last_name":"Evans","country":"Bhutan","ip_address":"252.123.77.101","email":"mevans@voolia.info"},
{"id":19,"first_name":"Arthur","last_name":"Morales","country":"Faroe Islands","ip_address":"116.5.126.29","email":"amorales@brainlounge.biz"},
{"id":20,"first_name":"Charles","last_name":"Perez","country":"Italy","ip_address":"10.43.255.4","email":"cperez@avaveo.net"}];
</script>
</body>
</html>
使用离子侧菜单（不工作）
<html ng-app="contactsApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Collection-Repeat: Early Preview</title>
<link href="http://code.ionicframework.com/1.0.0-beta.9/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.js"></script>
<style type="text/css" media="screen">
.list .my-item.item {
left: 0;
right: 0;
padding-top: 0;
padding-bottom: 0;
}
</style>
</head>
<body>
<ion-nav-view>
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="MainCtrl">
</ion-side-menu-content>
<ion-header-bar class="bar-positive">
<h1 class="title">3000 Contacts</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a class="item my-item"
collection-repeat="item in contacts"
collection-item-height="getItemHeight(item)"
collection-item-width="'100%'"
ng-href="https://www.google.com/#q={{item.first_name + '+' + item.last_name}}"
ng-style="{'line-height': getItemHeight(item) + 'px'}">
{{item.letter || (item.first_name+' '+item.last_name)}}
</a>
</div>
</ion-content>
<!-- Left menu -->
<ion-side-menu side="left">
This is the side menu.
</ion-side-menu>
</ion-side-menus>
</ion-nav-view>
<script type="text/javascript" charset="utf-8">
angular.module('contactsApp', ['ionic'])
.controller('MainCtrl', function($scope, $ionicScrollDelegate, filterFilter) {
$scope.contacts = window.CONTACTS;
$scope.getItemHeight = function(item) { return 100; };
});
window.CONTACTS = [{"id":1,"first_name":"Patrick","last_name":"Rogers","country":"Cyprus","ip_address":"153.88.89.148","email":"progers@yata.net"},
{"id":2,"first_name":"Janet","last_name":"Gordon","country":"Croatia","ip_address":"209.73.121.212","email":"jgordon@skivee.biz"},
{"id":3,"first_name":"Kathy","last_name":"Hamilton","country":"Armenia","ip_address":"164.214.217.162","email":"khamilton@rhynyx.biz"},
{"id":4,"first_name":"Stephanie","last_name":"Johnson","country":"Mauritius","ip_address":"8.199.242.67","email":"sjohnson@jabbertype.mil"},
{"id":5,"first_name":"Jerry","last_name":"Palmer","country":"Thailand","ip_address":"230.207.100.163","email":"jpalmer@avamm.org"},
{"id":6,"first_name":"Lillian","last_name":"Franklin","country":"Germany","ip_address":"150.190.116.1","email":"lfranklin@eare.mil"},
{"id":7,"first_name":"Melissa","last_name":"Gordon","country":"Serbia","ip_address":"162.156.29.99","email":"mgordon@flashset.org"},
{"id":8,"first_name":"Sarah","last_name":"Burns","country":"Grenada","ip_address":"13.177.156.223","email":"sburns@eimbee.info"},
{"id":9,"first_name":"Willie","last_name":"Burton","country":"Croatia","ip_address":"115.133.81.82","email":"wburton@dynazzy.info"},
{"id":10,"first_name":"Tina","last_name":"Simmons","country":"United States Virgin Islands","ip_address":"113.49.63.18","email":"tsimmons@devpulse.mil"},
{"id":11,"first_name":"Kenneth","last_name":"Larson","country":"Mexico","ip_address":"92.89.76.196","email":"klarson@browseblab.info"},
{"id":12,"first_name":"Philip","last_name":"Welch","country":"Cuba","ip_address":"223.180.48.70","email":"pwelch@skippad.edu"},
{"id":13,"first_name":"Nicholas","last_name":"Parker","country":"British Indian Ocean Territory","ip_address":"200.150.119.13","email":"nparker@twitternation.net"},
{"id":14,"first_name":"Nicole","last_name":"Webb","country":"Moldova","ip_address":"47.66.237.205","email":"nwebb@midel.biz"},
{"id":15,"first_name":"Clarence","last_name":"Schmidt","country":"China","ip_address":"134.84.246.67","email":"cschmidt@dazzlesphere.net"},
{"id":16,"first_name":"Jessica","last_name":"Murray","country":"Sao Tome and Principe","ip_address":"211.30.32.109","email":"jmurray@jumpxs.net"},
{"id":17,"first_name":"Willie","last_name":"Schmidt","country":"US Minor Outlying Islands","ip_address":"158.40.109.208","email":"wschmidt@babbleset.edu"},
{"id":18,"first_name":"Margaret","last_name":"Evans","country":"Bhutan","ip_address":"252.123.77.101","email":"mevans@voolia.info"},
{"id":19,"first_name":"Arthur","last_name":"Morales","country":"Faroe Islands","ip_address":"116.5.126.29","email":"amorales@brainlounge.biz"},
{"id":20,"first_name":"Charles","last_name":"Perez","country":"Italy","ip_address":"10.43.255.4","email":"cperez@avaveo.net"}];
</script>
</body>
</html>
答案 0 :(得分：0)
在第二个示例中，所有列表内容都不可见，因为ion-side-menu-content标记中没有任何内容。将ion-header-bar和ion-content代码及其内容移至ion-side-menu-content代码后，第二个示例即可生效。