Compile directive within controller and return html to DataTable's render function

Question

For performance resins I am using a JQuery DataTable inside my controller without attaching it to the model. I need to be able to compile the directive inside the controller and return the html to the DataTable's render function.

Syntax Error: Token 'Object' is unexpected, expecting []] at column 9 of the expression [[object Object]] starting at [Object]].

Controller:

    self.icons = ['icon-remove', 'icon-file', 'icon-rocket'];
    self.rocketOpt = ['Launch', 'Individual', 'Group'];
    self.removeOpt = ['Delete'];
    self.scanOpt =   ['Individual', 'View'];

    jQuery('tbl').DataTable({
                data: self.tbl,
                columns: [
                    {
                        data: 'action',
                        order: [],
                        render: function (data, type, full, meta) {
                            var html = '';
                            // different items get different icons
                            if (full.name.search(/Announce/) !== -1) {
                                html = getBtnHtml(self.icon[0], self.removeOpt);
                            } else if (full.name.search(/[fF]ile/) !== -1) {
                                html = getBtnHtml(self.icon[1], self.scanOpt);
                            } else {
                                html = getBtnHtml(self.icon[2], self.rocketOpt);
                            }

                            return html;
                        },....
    function getBtnHtml(icon, options){
      // Not working ?????????????????????
      var html = '<action-buttons id="remove" icons="' + icon + '" options="' + options + '"></action-buttons>';
        return ($compile(html)($scope)[0]);
    }

Directive:

var actionButtons = function () {
        return {
            restrict: 'E',
            templateUrl: 'partials/actionButtons.html',
            scope: {
                icons: '@',
                options: '@'
            }
        };
    };

HTML Template:

<div class="RUIFW-btn-group bg-danger">
    <button class="RUIFW-btn">
        <span class="{{ icons }}"/>
    </button>
    <a data-toggle="dropdown" class="RUIFW-btn dropdown-toggle">
        <span class="sr-only">More Options</span> 
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li ng-repeat="option in options">
            <a href="#/">{{ option }}</a>
        </li>
    </ul>
</div>

A. Rose · Accepted Answer · 2015-11-26 21:27:16Z

Just bring template into controller and give up on using a directive. Insure that html string is an angular element before compiling.

In Controller

function getBtnHtml(icon, options){
            var buttonHtml = '<div><div class="btn-group">' +
                            '<button>' +  
                            '<span class="' + icon + '"/></button>' +
                            '<a data-toggle="dropdown" class="dropdown-toggle">' +
                            '<span>More Options</span> <span class="caret"></span>' +
                            '</a><ul class="dropdown-menu pull-right">';

            angular.forEach(options, function(option, key){
                buttonHtml += '<li><a href="#/">' + option + '</a></li>';
            });

            comboBtn += '<li class="divider"></li>' +
                         '<li><a data-toggle="modal" data-target="#btModal">Info</a></li>' +
                         '</ul>' +
                         '</div></div>';
            var buttonElement = angular.element(buttonHtml);
            return ($compile(buttonElement)($scope)[0]).innerHTML;
        }

mrudult · Accepted Answer · 2017-07-22 18:27:33Z

2

I did it like this:

createdRow: function(row, data, dataIndex) {
  $compile(angular.element(row).contents())($scope);
},
columnDefs: [ {
  targets: -2,
  render: function ( data, type, full, meta ) {
    return "<td><a class='btn btn-warning btn-sm' ng-click='editUser(" + data + ")'><i class='fa fa-pencil-square-o'></i></a></td>";
  }
}]

I somehow think it doesn't make sense to bind a single cell to angular. Need to bind the complete row instead.

answered Jul 22, 2017 at 18:27

mrudult

2,5804 gold badges36 silver badges55 bronze badges

Collectives™ on Stack Overflow

Compile directive within controller and return html to DataTable's render function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related