javascript - Collection-Repeat 和 $ionicModal 奇怪的行为

Question

我正在制作一个包含大约 200 个列表项(员工)的目录应用程序。该应用程序使用 ng-repeat 按预期运行，但是加载缓慢。我切换到 Collection-Repeat 以利用速度提升，但我遇到了我无法弄清楚的奇怪行为。

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

当模式打开时，它从页面底部开始——我可以看到内容半秒钟，然后它会动画到屏幕中间。首先，加载的数据是正确的。随着它的动画，它切换到另一个员工数据。我似乎无法弄清楚为什么。我是 Angular/ ionic 的新手，所以任何指针都会很棒。谢谢!

编辑 - 出于好奇，我向每个元素添加了第二个 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 :

.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

我认为问题在于您没有向模态模板传递任何值。它正在获得剩余值(value)。我也看到您在项目列表中使用了太多的 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>

如您所见，我已经删除了 A 标签内的所有 ng-click 和 ng-controller，并且只留下了 A 标签的属性。您也可以注意到我将对象 row 传递给了 openmModal() 函数。

在 Controller 中，我做了下一个更改:

$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 中对其进行了测试，它可以正常工作。试一试，然后告诉我它是否适合你。