एनजी-क्लिक नहीं कर रहा है AngularJS और डेटाटेबल

Question

मैंने AngularJS के लिए डेटाटेबल्स निर्देश लिखा था। यह ठीक काम कर रहा है सिवाय इसके कि मैं पंक्ति में एक बटन जोड़ने की कोशिश कर रहा हूं जो एक एनजी-क्लिक के साथ एक पंक्ति को हटा देता है।

मेरी राय में समस्या यह होती है क्योंकि तालिका पंक्ति अब दायरा नहीं है।

क्या कोई इस समस्या को हल करने में मेरी सहायता कर सकता है।

jsFiddle उदाहरण: http://jsfiddle.net/A5Zvh/7/

मेरे निर्देश इस तरह दिखता है।

angular.module('DataTables', []) 
.directive('datatable', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     require: 'ngModel', 
     template: '<table></table>', 
     link: function(scope, element, attrs, model) { 
      var dataTable = null, 
       options; 

      var buttons = jQuery.parseJSON(attrs['buttons']) || null; 

      options = { 
        "bJQueryUI": false, 
        "sDom": "<'row-fluid'<'span4'l><'span8 filter' <'pull-right'T> <'pull-right'f>>r>t<'row-fluid'<'span6'i><'span6'p>>", 
        "sPaginationType": "bootstrap", 
        "oTableTools": { 
        } 
       }; 

      if(_.has(attrs, 'datatableOptions')) { 
       jQuery.extend(true, options, scope.$eval(attrs['datatableOptions'])); 
      } 

      scope.$watch(attrs.ngModel, function(data) { 
       if(data && _.size(data.aaData) > 0 && _.size(data.aoColumns) > 0) { 

        _.extend(options, scope.$eval(attrs.ngModel)) 
        dataTable = $(element).dataTable(options); 
        dataTable.fnClearTable(); 
        dataTable.fnAddData(data.aaData); 
       } 
      }); 
     } 
    } 
}) 

Answer 1

अपने नियंत्रक में नष्ट समारोह कहा जाता नहीं है, क्योंकि AngularJS डोम के उन तत्वों का DataTables के सम्मिलन के बारे में कुछ भी पता नहीं है, उन तत्वों के भीतर इस प्रकार ngClick निर्देश संकलित और जुड़ा हुआ नहीं है। तो बदलने के लिए:

dataTable.fnAddData(data.aaData); 

करने के लिए

dataTable.fnAddData(data.aaData); 
$compile(element)(scope); 

और $ इंजेक्षन सेवा संकलित करने के लिए:

.directive('datatable', function() { 

करने के लिए

.directive('datatable', function ($compile) { 

और अपने हटाने समारोह jsFiddle में टूट गया है, उम्मीद है कि आपके वास्तविक प्रोजेक्ट में मामला नहीं है ect!

Answer 2

आप ज़ेडम के पहले जोड़े को this Google Groups thread पर विशेष रूप से अपने दो लिंक किए गए जेएसफ़िड्स पर देखना चाहते हैं। मैंने मूल रूप से उन्हें कॉपी किया और वे एक बुनियादी स्तर पर काम करते हैं। मैंने अभी तक एक पंक्ति पर क्लिक से कुछ कार्रवाई शुरू करने की कोशिश नहीं की है।

मुझे लगता है कि आपने थोड़ा अलग दृष्टिकोण लागू किया है, <table> HTML नोड को पूरी तरह से पुनर्निर्मित किया है। सुनिश्चित नहीं है कि यह समस्याएं पैदा कर रहा है या नहीं।

वैसे, scope.$watch कॉल पर मुझे यह सुनिश्चित करना था कि लौटा संसाधन $ ऑब्जेक्ट पर मूल्य तुलना (संदर्भ तुलना के बजाय) को सही करने के लिए एक तीसरा पैरामीटर सेट सही था। निश्चित नहीं है कि आपको इसकी आवश्यकता क्यों नहीं है।

Answer 3

मैंने प्रत्येक टीडी के माध्यम से जाकर और $ संकलन कॉल करके इसे हल किया। डेटाटेबल पंक्ति कॉलबैक फ़ंक्शन का उपयोग करना। उम्मीद है की यह मदद करेगा।

options.fnCreatedCell = function (nTd, sData, oData, iRow, iCol) { 
    $compile(nTd)($scope); 
} 

//or row 

options.fnCreatedRow = function(nRow, aData, iDataIndex) { 
    $compile(nRow)($scope); 
} 

Answer 4

aoColumns में आपूर्ति की जा fnCreatedCell या fnCreatedRow mRender को आपूर्ति

1) fnCreatedCell आधारित स्तंभ है

पूर्व:

tableElement.dataTable({ 
       "bDestroy": true, 
       oLanguage : { 
         sLengthMenu : '_MENU_ records per page' 
       }, 
       aoColumnDefs: [ 
     { 
       bSortable: false, 
       aTargets: [ -1,-2,-3 ], 
       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)   
         { 
          $compile(nTd)($scope) 
          } 
      } 
     ], 

2) fnCreatedRow एक 'शीर्ष है स्तर 'कॉलबैक

tableElement.dataTable({ 
       "bDestroy": true, 
       oLanguage : { 
         sLengthMenu : '_MENU_ records per page' 
       }, 
     aoColumnDefs: [ 
     { 
      bSortable: false, 
      aTargets: [ -1,-2,-3 ] 
     } 
     ], 
     "fnCreatedRow": function(nRow, aData, iDataIndex){ 
        compile(nRow)(scope); 
      }, 

Answer 5

मैं Angular-datatbles उपयोग कर रहा हूँ, और मैं गतिशील जोड़ने के लिए, संपादित करें & datatble पंक्तियों के लिए लिंक निकालें और पर मोडल प्रदर्शित कोशिश कर रहा था एनजी-क्लिक करें;

यह मेरे मामले का समाधान था;

$scope.dtOptions.withOption('fnRowCallback', 
    function (nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
     $compile(nRow)($scope); 
    }); 

सभी डेटाटेबल बाइंडिंग कोड;

$scope.reloadData = function() { 
    $scope.dtOptions.reloadData(); 
}; 

$scope.dtColumnDefs = [ 

    DTColumnDefBuilder.newColumnDef(2).renderWith(function (data, type, row) { 
     var html = '<a href="" class="txt-color-blue pull-left" ng-click="editModal()"><i class="fa fa-pencil hidden-xs"></i> Edit</a>' + 
        '<a href="" class="txt-color-red padding-top-15" ng-click="removeModal()"><i class="fa fa-times hidden-xs"></i> Remove</a>'; 
     return html; 
    }) 
]; 

$scope.dtColumns = [ 
    DTColumnBuilder.newColumn('name').withTitle('Name'), 
    DTColumnBuilder.newColumn('type').withTitle('Type'), 
    DTColumnBuilder.newColumn('id').withTitle(''), 
]; 

$scope.dtOptions.withOption('fnRowCallback', 
    function (nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
     $compile(nRow)($scope); 
    });