AngularJS- TypeError: $element.find(...).each is not a function

Issue

I am trying to use datatable in angularJS. Here is my HTML Code:

   <div ng-app="datatable">
                             <div ng-controller="voucherlistcontroller">
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"
                                       my-table="overrideOptions"
                                       aa-data="voucherList"
                                       ao-column-defs="columnDefs"
                                       fn-row-callback="myCallback" >
                                    <thead>
                                    <tr>
                                        <th>VIN Date</th>
                                        <th>VIN No</th>
                                        <th>Receive Type</th>
                                        <th>Amount</th>
                                        <th>Particulars</th>
                                        <th>Posted</th>
                                        <th>Status</th>
                                        <th>Preview</th>
                                    </tr>
                                    </thead>
                                    <tbody ng-repeat = " vlist in voucherList">
                                            <tr>
                                                <td>{{vlist.vindate}}</td>
                                                <td>{{vlist.vinno}}</td>
                                                <td>{{vlist.receivetype}}</td>
                                                <td>{{vlist.amount}}</td>
                                                <td>{{vlist.particulars}}</td>
                                                <td>{{vlist.posted}}</td>
                                                <td>{{vlist.status}}</td>
                                                <td>{{vlist.preview}}</td>
                                            </tr>
                                    </tbody>
                                </table>
                             </div>
                         </div>

Here is my angularJS code:

 var dialogApp = angular.module('datatable', []);

    dialogApp.directive('myTable', function() {
        return function(scope, element, attrs) {

            // apply DataTable options, use defaults if none specified by user
            var options = {};
            if (attrs.myTable.length > 0) {
                options = scope.$eval(attrs.myTable);
            } else {
                options = {
                    "bStateSave": true,
                    "sDom":"lftipr",
                    "searching": true,
                    "iCookieDuration": 2419200, /* 1 month */
                    "bJQueryUI": true,
                    "bPaginate": true,
                    "bLengthChange": false,
                    "bFilter": false,
                    "bInfo": false,
                    "bDestroy": true
                };
            }

            // Tell the dataTables plugin what columns to use
            // We can either derive them from the dom, or use setup from the controller
            var explicitColumns = [];
            element.find('th').each(function(index, elem) {
                explicitColumns.push($(elem).text());
            });
            if (explicitColumns.length > 0) {
                options["aoColumns"] = explicitColumns;
            } else if (attrs.aoColumns) {
                options["aoColumns"] = scope.$eval(attrs.aoColumns);
            }

            // aoColumnDefs is dataTables way of providing fine control over column config
            if (attrs.aoColumnDefs) {
                options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
            }

            if (attrs.fnRowCallback) {
                options["fnRowCallback"] = scope.$eval(attrs.fnRowCallback);
            }

            // apply the plugin
            var dataTable = element.dataTable(options);



            // watch for any changes to our data, rebuild the DataTable
            scope.$watch(attrs.aaData, function(value) {
                var val = value || null;
                if (val) {
                    dataTable.fnClearTable();
                    dataTable.fnAddData(scope.$eval(attrs.aaData));
                }
            });
        };
    });

dialogApp.controller("voucherlistcontroller" ,function Ctrl($scope) {

    $scope.message = '';

        $scope.myCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            $('td:eq(2)', nRow).bind('click', function() {
                $scope.$apply(function() {
                    $scope.someClickHandler(aData);
                });
            });
            return nRow;
        };

        $scope.someClickHandler = function(info) {
            $scope.message = 'clicked: '+ info.price;
        };

        $scope.columnDefs = [
            { "mDataProp": "vindate", "aTargets":[0]},
            { "mDataProp": "vinno", "aTargets":[1] },
            { "mDataProp": "receivetype", "aTargets":[2]},
            { "mDataProp": "amount", "aTargets":[3]},
            { "mDataProp": "particulars", "aTargets":[4]},
            { "mDataProp": "posted", "aTargets":[5]},
            { "mDataProp": "status", "aTargets":[6]},
            { "mDataProp": "preview", "aTargets":[7]}
        ];

        $scope.overrideOptions = {
                                "bStateSave": true,
                                 "sDom":"lftipr",
                                "searching": true,
                                "iCookieDuration": 2419200, /* 1 month */
                                "bJQueryUI": true,
                                "bPaginate": true,
                                "bLengthChange": false,
                                "bFilter": false,
                                "bInfo": false,
                                "bDestroy": true
        };


        $scope.voucherList = [--some data-];

But It is not considered the element as a function. It shows -TypeError: element.find(...).each is not a function at Object.

But I think I have given all the references on html page. The list of references is given:

• JQuery-1.9.0
• JQUery-migrate 1.2.1.js
• bootstrap.bundle.min.js
• jquery-ui.min.js
• http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js
• https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js
• https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js

How Can I solve this problem? Please Help!!!

Solution

Error occurs because element is a dom element not a jQuery object. It will be:

 $(element).find('th').each(function(index, elem) {
            explicitColumns.push($(elem).text());
        });

Instead of:

 element.find('th').each(function(index, elem) {
            explicitColumns.push($(elem).text());
        });

Answered By - OUN Saif