[英]Collection-Repeat and $ionicModal Strange Behavior
I am making a directory app that comprises roughly 200 list items (employees). 我正在制作一个包含大约200个列表项(员工)的目录应用程序。 The app worked as intended using ng-repeat, however, it was sluggish to load.
该应用程序使用ng-repeat可以按预期工作,但是加载缓慢。 I switched to Collection-Repeat to take advantage of the speed boost but I am getting bizarre behaviors that I can't figure out.
我改用Collection-Repeat来利用速度提升,但是却出现了我无法弄清的怪异行为。
The list items are rendering correctly, alphabetically with the category titles added successfully. 列表项按字母顺序正确显示,并且类别标题已成功添加。 The problem is, each list item has a ng-click attribute that opens an $ionicModal.
问题是,每个列表项都有一个ng-click属性,可打开$ ionicModal。 The modal for each item opens, but the loaded data is incorrect.
每个项目的模态都会打开,但是加载的数据不正确。
When the modal opens, it starts at the bottom of the page - I can see the contents for half a second before it animates to the middle of the screen. 模态打开后,它从页面底部开始-在动画到屏幕中间之前,我可以看到内容半秒钟。 To start, the loaded data is correct.
首先,加载的数据是正确的。 As it animates, it switches to another employees data.
进行动画处理时,它将切换到另一个员工数据。 I can't seem to figure out why.
我似乎不知道为什么。 I'm new to angular/ionic so any pointers would be great.
我是角度/离子的新手,所以任何指针都很棒。 Thanks!
谢谢!
EDIT - Out of curiousity, I added a second ng-controller="ModalCtrl" ng-click="openModal();"
编辑-出于好奇,我添加了第二个
ng-controller="ModalCtrl" ng-click="openModal();"
to each element as a button. 每个按钮 Clicking on the element does the usual - opens the modal with the wrong employee.
单击该元素会执行常规操作-使用错误的员工打开模式。 Clicking on the newly created button however creates TWO modals (stacked on eachother) BOTH with the correct employee.
但是,单击新创建的按钮会同时使用正确的员工创建两个模态(彼此叠加)。 Removing either instance to the ng-controller or ng-click puts me back at square one with only one modal of incorrect data.
将任何一个实例删除到ng-controller或ng-click都会使我回到只有一个错误数据模态的平方。 Why is this?
为什么是这样? Why does adding a second ng-click correct the problem (despite having two modals)?
为什么添加第二个ng-click可以解决问题(尽管有两个模态)?
EDIT - Here is a link to a codepen sample (dumbed down, but proves my issue: http://codepen.io/anon/pen/zijFv?editors=101 编辑-这是指向Codepen示例的链接(已归类,但证明了我的问题: http ://codepen.io/anon/pen/zijFv?editors=101
My HTML looks like this: 我的HTML看起来像这样:
<div class="list">
<a class="item my-item"
collection-repeat="row in contacts"
collection-item-height="getItemHeight(row)"
collection-item-width="'100%'"
ng-class="{'item-divider': row.isLetter}">
<!-- ADDED BUTTON SEE EDIT COMMENT ABOVE -->
<button ng-if="!row.isLetter" ng-controller="ModalCtrl" ng-click="openModal();">Click</button>
<img ng-controller="ModalCtrl" ng-click="modal.show()" ng-if="!row.isLetter" ng-src="data:image/jpeg;base64,{{row.image}}">
<h2>{{row.title || (row.firstname+' '+row.lastname)}}</h2>
<p ng-if="!row.isLetter"><em>{{row.jobtitle}}</em></p>
</a>
</div>
My Modal HTML is this: 我的模态HTML是这样的:
<header class="bar bar-header bar-lsi">
<h1 class="title">Contact Information</h1>
<div class="button button-clear" ng-click="closeModal()">
<span class="icon ion-close"></span>
</div>
</header>
<ion-content has-header="true" style="margin-top: 0px !important;">
<div class="list card" style="border-radius: 0px !important;">
<div class="item item-avatar item-text-wrap">
<img ng-src="data:image/jpeg;base64,{{row.image}}">
<h2>{{row.firstname}} {{row.lastname}}</h2>
<p>{{row.jobtitle}}</p>
</div>
<a href="tel:{{row.phone}}" class="item item-icon-left">
<i class="icon ion-iphone"></i>
{{row.phone}}
</a>
<a href="mailto:{{row.email}}" class="item item-icon-left">
<i class="icon ion-email"></i>
{{row.email}}
</a>
</div>
</ion-content>
And then I have my basic controller: 然后我有了基本的控制器:
.controller('ModalCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
I think the problem is that you aren't passing to the modal template any value. 我认为问题在于您没有将任何值传递给模式模板。 It's getting residual values.
它正在获得残值。 I see too that you are using too much ng-controller and ng-click in items list and what is inside it.
我也看到您正在使用过多的ng-controller和ng-click在项目列表中以及其中的内容。 I mean, if you use ng-click for A.item, you don't need to use ng-click for the image inside it.
我的意思是,如果您将ng-click用于A.item,则无需对其中的图像使用ng-click。
Let's see some code: 让我们看一些代码:
<a class="item my-item"
collection-repeat="row in contacts"
collection-item-height="getItemHeight(row)"
collection-item-width="'100%'"
ng-class="{'item-divider': row.isLetter}"
ng-controller="ModalCtrl" ng-click="openModal(row);">
<img ng-if="!row.isLetter" ng-src="http://placehold.it/65x65">
<h2>{{row.title || (row.firstname+' '+row.lastname)}}</h2>
<p ng-if="!row.isLetter"><em>{{row.jobtitle}}</em></p>
</a>
As you can see, I've removed all ng-click and ng-controller inside A tag, and I've left only what is attributes of A tag. 如您所见,我删除了A标签内的所有ng-click和ng-controller,仅保留了A标签的属性。 You can notice too that I pass the object
row
to the openmModal()
function. 您还可以注意到,我将对象
row
传递给了openmModal()
函数。
In controller, I've made next changes: 在控制器中,我进行了以下更改:
$scope.openModal = function(item) {
$scope.modal.row = item;
$scope.modal.show();
};
And in the modal template I've used modal.row as variable with the data from the item list touched. 在模态模板中,我使用modal.row作为变量,并触摸了项目列表中的数据。 So in template I use it like this:
所以在模板中,我像这样使用它:
<div class="item item-avatar item-text-wrap">
<img ng-src="http://placehold.it/65x65">
<h2>{{modal.row.firstname}} {{modal.row.lastname}}</h2>
<p>{{modal.row.jobtitle}}</p>
</div>
<a href="tel:{{modal.row.phone}}" class="item item-icon-left">
<i class="icon ion-iphone"></i>
{{modal.row.phone}}
</a>
<a href="mailto:{{modal.row.email}}" class="item item-icon-left">
<i class="icon ion-email"></i>
{{modal.row.email}}
</a>
I've test it in your codepen and it works. 我已经在您的Codepen中对其进行了测试,并且可以正常工作。 Try it and tell me if it works for you.
试试看,告诉我它是否对您有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.