Angularjsのデータ型 - rowCallbackイベント

Question

誰かがrowCallbackを手伝ってくれますか？問題は、私はテーブルがあり、あなたはクリックされたアイテムのオープン情報のテーブル行のどこかをクリックすることができます。最初のTDではチェックボックスをオンにしました。しかし、私がチェックボックスをチェックすると、私は情報を開くしたくないです。 は、ここでは、より良い説明

私のコード

var vm = this; 
    vm.selected = {}; 
    vm.selectAll = false; 
    vm.toggleAll = toggleAll; 
    vm.toggleOne = toggleOne; 

    var titleHtml = '<input type="checkbox" ng-model="showCase.selectAll" ng-click="showCase.toggleAll(showCase.selectAll, showCase.selected)">'; 


    function getUserTokenFromLocalStorage(localStorage) { 
     var authData = []; 
     for (key in localStorage) { 
      if (key == "ls.authorizationData") { 
       authData = localStorage[key]; 
      } 

     } 

     var jsonObj = JSON.parse(authData); 
     return jsonObj.token; 
    }; 


    var vm = this; 
    vm.message = ''; 
    vm.someClickHandler = someClickHandler; 
    vm.dtOptions = DTOptionsBuilder.newOptions() 
     .withOption('ajax', { 
      // Either you specify the AjaxDataProp here 
      // dataSrc: 'data', 
      url: serviceBase + 'test', 
      type: 'POST', 
      headers: { 
       'xtoken': 'Bearer ' + getUserTokenFromLocalStorage(localStorage) 
      } 
     }) 
     // or here 
     .withDataProp('data') 
     .withOption('processing', true) 
     .withOption('serverSide', true) 
     .withOption('rowCallback', rowCallback) 
     .withOption('createdRow', function(row, data, dataIndex) { 
      // Recompiling so we can bind Angular directive to the DT 
      $compile(angular.element(row).contents())($scope); 
     }) 
     .withOption('headerCallback', function(header) { 
      if (!vm.headerCompiled) { 
       // Use this headerCompiled field to only compile header once 
       vm.headerCompiled = true; 
       $compile(angular.element(header).contents())($scope); 
      } 
     }) 
     .withPaginationType('full_numbers') 


    vm.dtColumns = vm.dtColumns = [ 
     DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable() 
     .renderWith(function(data, type, full, meta) { 
      vm.selected[full.id] = false; 
      return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']" ng-click="showCase.toggleOne(showCase.selected)">'; 
     }), //don't change state when click on this TD, only check checkbox. 
     DTColumnBuilder.newColumn('id').withTitle('ID'), 
     DTColumnBuilder.newColumn('type').withTitle('Type'), 
     DTColumnBuilder.newColumn('city').withTitle('City'), 
     DTColumnBuilder.newColumn('country').withTitle('Country'), 
     DTColumnBuilder.newColumn('last_report_dt').withTitle('Last report'), 
     DTColumnBuilder.newColumn('hardware_version').withTitle('HW version'), 
     DTColumnBuilder.newColumn('rpi_image_version').withTitle('Image version'), 
     DTColumnBuilder.newColumn('software_version').withTitle('Code version'), 
     DTColumnBuilder.newColumn('internal_note').withTitle('Internal note'), 
     DTColumnBuilder.newColumn(null).withTitle('Info').notSortable() 
     .renderWith(function(data, type, full, meta) { 
      vm.selected[full.id] = false; 
      return '<a class="btn btn-default" ng-href="info/' + data.id + '">Info</a>'; 
     }), 
    ]; 

    function toggleAll(selectAll, selectedItems) { 
     for (var id in selectedItems) { 
      if (selectedItems.hasOwnProperty(id)) { 
       selectedItems[id] = selectAll; 
      } 
     } 
    } 

    function toggleOne(selectedItems) { 
     for (var id in selectedItems) { 
      if (selectedItems.hasOwnProperty(id)) { 
       if (!selectedItems[id]) { 
        vm.selectAll = false; 
        return; 
       } 
      } 
     } 
     vm.selectAll = true; 
    } 


    function someClickHandler(info) { 
     vm.message = info.id; 
     $location.path('info/' + info.id); 

    } 

    function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
     // Unbind first in order to avoid any duplicate handler (see https://github.com/l-lin/angular-datatables/issues/87) 
     $('td', nRow).unbind('click'); 
     $('td', nRow).bind('click', function() { 
      $scope.$apply(function() { 
       vm.someClickHandler(aData); 
      }); 
     }); 
     return nRow; 
    } 


} 

Answer 1

用の画像は、この問題を自分自身を持っていたことがあります。あなたのアプローチは少し後ろ向きだと思います。 rowCallback内のtdクリックハンドラを宣言すると、idを渡すことができます。代わりに、私はこれをお勧めします：

1. はクリック防ぐために、最初の列にno-clickクラスを追加します。

   DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable() 
       .withClass('no-click') 
       .renderWith(function(data, type, full, meta) { 
       vm.selected[full.id] = false; 
       return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']" ng-click="showCase.toggleOne(showCase.selected)">'; 
       }), 
   

2. 変更した行の属性としてidを注入するが、何もしないようにrowCallbackを：

   function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
       $(nRow).attr('data-id', aData.id); 
   } 
   

3. tdの代理イベントハンドラを置き換えるイベントハンドラrowCallback内側とあなたのsomeClickHandler()両方：

   $('#tableid').on('click', 'tbody td:not(.no-click)', function() { 
       var id = $(this).parent().attr('data-id'); 
       vm.message = id; 
       $location.path('info/' + id); 
   })