Angular directive not rendering dynamically

Question

I'm using angular directive with jquery datatables, in the mRender function I used the following code to render row actions:

datatables mRender function:

var renderRowActions = function (data, type, row) {
   //var markup = $('#rowActions').html().replace(/{rowId}/g, row[0]);
    var markup = '<div row-actions action="delete(" + row[0] + ")" ></div>';
    return markup;
};

directive code:

app.directive('rowActions', function () {
    return {
        restrict: 'A',
        replace: true,
        template: '<button data-ng-click="action()"></button>',
        scope: {
            action: "&"
        }
    };
});

Are you using $complie when adding markup to the dom. $compile(somehtml)(scope); — Rob, Nov 15 '13 at 18:04
possible duplicate of [Dynamically loaded input box does nothining](http://stackoverflow.com/questions/15438092/dynamically-loaded-input-box-does-nothining) — Stewie, Nov 15 '13 at 18:35
yes, $compile(markup2)($scope) returns [object object] and $compile(markup2)($scope).html() returns null — user2997115, Nov 15 '13 at 18:35
mRender function expects html string markup not element object — user2997115, Nov 15 '13 at 18:55
one suggestion might be a jQuery custom event triggered from delegated event handler for `DIV` and manipulate scope within that jQuery custom event inside directive that sets up dataTables. I've used dataTables quite a bit, and angular...but never together (yet) — charlietfl, Nov 15 '13 at 19:59
Alternately switch out datatables for an angular grid module...sometimes picking the right tool for the job makes all the difference — charlietfl, Nov 15 '13 at 20:02

score -1 · Answer 1 · answered Apr 12 '16 at 20:53

This question is old as dirt, but here goes.... For my directive called "spinner":

{
    className: 'spinner-control',
    orderable: false,
    data: null,
    render: function (data, type, row, meta) {
        return '<spinner ng-model="accounts['+meta.row+'].alloc" ng-format="percentage" width="75px" step="0.5"></spinner>';
    }
}

You can then update the jQuery after the fact and replace the innerHTML with the compiled element. Code is written "long form" to make it obvious what it's doing.

$('.spinner-control').each(function(){
    var innerHTML = $(this);
    console.log("InnerHTML", innerHTML);
    var html = $compile(innerHTML)($scope);
    console.log("HTML", html);
    $(this).innerHTML = '';
    $(this).append(html);
});

Angular directive not rendering dynamically

1 Answers1