I know it's tempting to use drag and drop angular modules created by other devs - but actually, unless you are doing something non-standard like dynamically adding / removing rows from the ng-repeated data set by calling $http services chance are you really don't need a directive based solution, so if you do go this direction you probably just created extra watchers you don't actually need.
What this implementation provides:
The implementation is easy. Just use angular's version of jQuery dom ready from your view's controller:
Inside your controller:
'use strict';
var yourApp = angular.module('yourApp.yourController.controller', []);
yourApp.controller('yourController', ['$scope', '$http', '$q', '$timeout', function ($scope, $http, $q, $timeout) {
$scope.users = [
{
email: '[email protected]',
name: {
first: 'User',
last: 'Last Name'
},
phone: '(416) 555-5555',
permissions: 'Admin'
},
{
email: '[email protected]',
name: {
first: 'First',
last: 'Last'
},
phone: '(514) 222-1111',
permissions: 'User'
}
];
angular.element(document).ready( function () {
dTable = $('#user_table')
dTable.DataTable();
});
}]);
Now in your html view can do:
<div class="table table-data clear-both" data-ng-show="viewState === possibleStates[0]">
<table id="user_table" class="users list dtable">
<thead>
<tr>
<th>E-mail</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Permissions</th>
<th class="blank-cell"></th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="user in users track by $index">
<td>{{ user.email }}</td>
<td>{{ user.name.first }}</td>
<td>{{ user.name.last }}</td>
<td>{{ user.phone }}</td>
<td>{{ user.permissions }}</td>
<td class="users controls blank-cell">
<a class="btn pointer" data-ng-click="showEditUser( $index )">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>