集合重复和$ ionicModal奇怪行为

Question

我正在制作一个包含大约200个列表项目（员工）的目录应用程序。该应用程序使用ng-repeat按预期工作，但是，加载很慢。我切换到收集重复利用的速度提升，但我越来越奇怪的行为，我无法弄清楚。

列表项正在渲染正确，按字母顺序添加成功的类别标题。问题是，每个列表项都有一个ng-click属性，打开一个$ ionicModal。每个项目的模式打开，但加载的数据不正确。

当模式打开时，它从页面底部开始 - 在屏幕中间动画之前，我可以看到内容半秒。开始时，加载的数据是正确的。当它动画时，它切换到另一个员工数据。我似乎无法弄清楚为什么。我是新来的角/离子，所以任何指针会很好。谢谢！

编辑 - 出于好奇，我添加了第二个ng-controller="ModalCtrl" ng-click="openModal();"作为一个按钮。单击通常的元素 - 打开错误的员工模式。点击新创建的按钮，然后创建两个模式（彼此堆叠），并与正确的员工一起使用。删除任何一个实例到ng-controller或ng-click都会让我回到原来的状态，只有一个不正确的数据模式。为什么是这样？为什么添加第二个ng-click会纠正问题（尽管有两个模态）？

编辑 - 这是一个codepen样品（简单化了一个链接，但证明了我的问题：http://codepen.io/anon/pen/zijFv?editors=101

我的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> 

我的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> 

然后，我有我的基本控制器：

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

}) 

Answer 1

我认为问题在于你没有传递给模态模板的任何值。它正在获得残值。我也看到你在项目列表中使用了太多的ng-controller和ng-click，并且它里面有什么。我的意思是，如果您对A.item使用ng-click，则不需要使用ng-click对其中的图像进行点击。

让我们来看看一些代码：

<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> 

正如你所看到的，我已经删除了所有NG点击和NG-控制器的标签里面，我只留下什么是标签的属性。您也可以注意到，我将对象row传递给openmModal()函数。

在控制，我做了下一个变化：

$scope.openModal = function(item) { 
    $scope.modal.row = item; 
    $scope.modal.show(); 
}; 

而在模式模板我用modal.row作为变量，从项目列表中的数据感动。所以在模板中我这样使用它：

<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>   

我已经在你的codepen中测试它，它的工作原理。试试吧，告诉我它是否适合你。