応答可能モードのデータテーブルng-clickは機能しません。

Question

私は角度ng-repeatによってデータが取り込まれています。以下のコードは私が使用しているものですが、私はヘッダーを変更しただけで何が繰り返されています。

モバイルデバイスでテストするまではすべて正常に動作し、テーブルは反応して、丸で囲まれた小さな記号を追加して非表示の列からデータを展開して表示します。これが起こると、「詳細情報」ボタンは単に機能しなくなります。

小さな+記号をクリックすると表示される情報は、クリックすると動的に追加されます。つまり、「詳細情報」ボタンはまだ隠れている元の複製ですテーブルの列。私はそれがng-clickイベントを "配線されていない"原因と考えています。

私が正しいかどうか、そして/またはこれを修正する方法を知っている人はいますか？

<table id="dtTransactions" datatable="ng" class="table table-bordered dt-responsive dataTable no-footer dtr-inline collapsed"> 
    <thead> 
     <tr> 
      <th>header 1</th> 
      <th>header 2</th> 
      <th>header 3</th> 
      <th>header 4</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="person in people"> 
      <td>{{ person.name }}</td> 
      <td>{{ person.age }}</td> 
      <td>{{ person.eyecolour }} }}</td> 
      <td>{{ person.shoesize }} }}</td> 
      <td align="center"> 
       <button type="button" class="btn btn-default" ng-click="doSomething(person)">More Info</button> 
      </td> 
     </tr> 
    </tbody> 
</table> 

ここに私のコントローラ用のタイプコピーがあります。私はtypescriptですの使用に非常に新しいですし、本質的に、このシステムでは、すでにあるものをコピーして自分の仕事のためにそれをrejiggingています：

module app.agreement { 
    'use strict'; 

    class DetailController { 
     // some variable declared 

     static $inject = ['$compile', '$scope', 'data', 'app.services.AgreementService', '$mdDialog'] 
     constructor(private $compile: ng.ICompileService, 
        private $scope: ng.IScope, 
        private data: any, 
        private agreementService: app.services.IAgreementService, 
        private mdDialog: angular.material.IDialogService) { 

      $('#dtTransactions').on('responsive-display', function() { 
       alert('asd'); 
       //var c = $compile($('#dtTransactions').html()); 
       //c($scope); 
       //$scope.$apply(); 
      }); 

      this.init(); 
     } 

     init(): void { 
      // variables initialised 
     } 
    } 

    angular.module('app.agreement') 
     .controller('app.agreement.DetailController', DetailController); 
} 

Answer 1

私はあなたがモバイルデバイス向けngTouchが必要だと思います。

Answer 2

あなたの機能を達成するためのあなたのアプローチは間違っています。 $indexで回避するには、次のようにボタンを繰り返さないでください。

<tr ng-repeat="person in people"> 
     <td>{{ person.name }}</td> 
     <td>{{ person.age }}</td> 
     <td>{{ person.eyecolour }} }}</td> 
     <td>{{ person.shoesize }} }}</td> 
     <td align="center"> 
      <button type="button" class="btn btn-default" ng-click="doSomething($index)">More Info</button> 
     </td> 
    </tr>