Andre.Santarosa Andre.Santarosa - 1 year ago 61
AngularJS Question

ng-click dont fire even after call $compile

I'm creating a DataGrid module with some actions, but the ng-click won't fire event after add the $compile statement


angular.module('powerGridAngular').service("powerGridContainer", function ($http, powerGridMethods) {

this.buildGrid = function (scope) {
return powerGridMethods.bindData(powerGridMethods.buildHeader(scope.options), scope);

angular.module('powerGridAngular').service('powerGridMethods', function ($http, $compile) {
this.getJson = function (url) {
return $http.get(url);

this.buildHeader = function (options) {
// create table element
var table = angular.element('<table></table>').addClass('table table-striped');
// create header element
var header = angular.element('<tr></tr>');
// run trough each header field and add them to header
angular.forEach(options[0]['headerFields'], function (val, key) {
header.append(angular.element('<th>' + val + '</th>'));
// check if grid has edit, if it have, adds a new blank field header
if (options[0]['hasEdit'] == true)

// append header to table
return table;

this.bindData = function (table, scope) {
// get grid options
var options = scope.options;
// get grid data via JSON
var gridData = this.getJson(options[0]['dataUrl']).success(function (data) {
// run rows
angular.forEach(data, function (rowVal, rowKey) {
// create row
var cellRow = angular.element('<tr></tr>');
// run through rows
angular.forEach(rowVal, function (cellVal, cellKey) {
// create through cells
// check if grid has actions
if (options[0]['hasEdit'] == true) {
// cell that contains icon to open options
cellRow.append(angular.element('<td style="width:30px" ng-click="editRow()"></td>').html('<span class="glyphicon glyphicon-menu-hamburger openMenu" aria-hidden="true"></span>'));
// options menu root
var menuRoot = angular.element('<div></div>').addClass('orgPgOptPanel');
// run through options
angular.forEach(options[0]['actions'], function (val, key) {
// create menu row
var menuItem = angular.element('<div></div>').addClass('orgPgOptPanelMenuItem');
// add menu html
// append menu item to menu container
// append menu root
// append all table cells to table
// compile directives
// return all table content already compiled
return table;



angular.module('pisApp').controller('regionalCtrl', function ($scope, powerGridContainer, $compile) {

$scope.editRow = function () {
$scope.tst = 30;
// header
$scope.header = ['Código', 'Regional']
// get grid data
$scope.gridContainer = angular.element('#gridContainer');
// define options
$scope.options = [{
headerFields: $scope.header,
hasEdit: true,
actions: [{
menuHtml: '<button type="button" ng-click="editRow()">Click me!</button>'
menuHtml:'<span id="spn" class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;Editar</a>'
menuHtml:'<span id="spn" class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;Editar</a>'
// bind grid
$scope.varReturn = powerGridContainer.buildGrid($scope);
var content = angular.element("#gridContainer").append($scope.varReturn);


Answer Source

I think I see the problem. this.getJson is making an asynchronous call, and $compile is being called synchronously - before the table's contents have been appended.

The solution is to make sure you are running $compile on the elements that get appended by the asynchronous callback.

I would probably do it something like:


// append all table cells to table


// compile table row
// append all table cells to table

Alternatively, you could just run $compile(table)(scope); at the end of the success callback.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download