集合重複和$ 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中測試它，它的工作原理。試試吧，告訴我它是否適合你。