AngularjsとのDataTable

Question

における動的HTMLコンテンツ私はデータテーブルを有する角度アプリケーションを有しています。データテーブルでは、セル内容をhtmlコンテンツに変更します。以下のコードで

、私はリンクを持つために5列のセルの内容を変更します。私はリンクについてユーザーに知らせるツールチップを持っていたいと思っています。 私はUI Bootstrapを使用しています。

var app = angular.module('smsmanagement', ['ngRoute', 'ui.bootstrap']); 
app.controller('RecipientsController', function ($scope, $http, $routeParams, $timeout, SweetAlert) { 

var groupID = $routeParams.param; 

    $('#table-recipients-view').DataTable({ 
     sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>", 
     "processing": true, 
     "serverSide": true, 
     "ajax": { 
      "url": "recipients/dt", 
      "data": function (d) { 
       d.groupID = groupID; 
      } 
     }, 
     "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
       var groupLink = ''; 
       // The number of columns to display in the datatable 
       var cols = 6; 

       var rowElementID = aData[(cols - 1)]; 

       groupLink = '<a href="#smsgroups/' + rowElementID + '" uib-tooltip="View group(s)">' + noOfGroups + '</a>'; 

      // Create a link in no of groups column 
       $(nRow).children('td:eq(' + (cols - 2) + ')').html(groupLink); 

      } 
     }); 
    }); 

私はgroupLink HTMLコンテンツにuib-tooltipディレクティブを追加しました。

問題は、ツールチップが表示されないです。私は$compileを使用して聞いたことがありますが、私はそれを使用する方法についてはあまりよく分かりません。

Answer 1

あなたはコンパイル使用についての権利です。これに

$(nRow).children('td:eq(' + (cols - 2) + ')').html(groupLink); 

：

$(nRow).children('td:eq(' + (cols - 2) + ')').html($compile(groupLink)($scope)); 

はまた、あなたのコントローラに$compileサービスを注入することを忘れないでください

は、次の行を変更してみてください。

編集

これは間違いなく問題を解決するためにクリーンな（または最もAngularJS）の方法ではありませんが、おそらく最も簡単なあなたの現在の設定与えられました。最良の方法は、おそらくデータテーブルを扱う新しいディレクティブを作成することですが、それはこの質問の範囲外です。

編集2

一般的な考え方は、あなたのコントローラ/サービスからDOM操作を切り離すためにディレクティブを作成することです。

は、ディレクティブを作成する方法を参照するには、公式AngularJSのドキュメント（https://docs.angularjs.org/guide/directive）を見てください。あなたの目標はおそらく、サービスを介してコントローラ内のデータを取得し、それをDOM操作に対処するために指示に渡すものです。

<my-data-table data="dataVariableInScope"></my-data-table>