I am stuck in this problem when I am trying to add buttons dynamically and
attaching a ng-click on that button.
Below it my code:
App:
var dialogApp = angular.module('tableExample', []);
//Directive
dialogApp.directive('myTable', function ($compile) {
return {
restrict: 'E, A, C',
link: function (scope, element, attrs, controller) {
scope.options = {
"bStateSave": true,
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
aoColumns: [{
"sTitle": "name"
}, {
"sTitle": "price"
}, {
"sTitle": "category"
}, {
"sTitle": "action"
}, {
"sTitle": "Edit"
},
{ "sTitle": "Delete" }],
"aaSorting": [[0, "asc"]],
aoColumnDefs: [
{ "bSortable": true, "aTargets": [0] },
{ "bSortable": false, "aTargets": [1, 2, 3, 4] }
],
bJQueryUI: true,
aaData: []
};
var dataTable = element.dataTable(scope.options);
scope.$watch('options.aaData', handleModelUpdates, true);
function handleModelUpdates(newData) {
var data = newData || null;
if (data) {
dataTable.fnClearTable();
dataTable.fnAddData(data);
}
}
},
scope: {
options: "="
}
};
});
//Controller
dialogApp.controller('DataTableTestController', ['$scope', '$compile',
'EkgService', function ($scope, $compile, EkgService) {
$scope.coisas = "coisas";
$scope.botaoEdit = function (a) {
console.log(a);
alert("With Compile" + a);
};
var getData = EkgService.GetJson();
getData.then(function (dbStuff) {
$scope.options = {
"bStateSave": true,
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
aoColumns: [{
"sTitle": "name"
}, {
"sTitle": "price"
}, {
"sTitle": "category"
}, {
"sTitle": "action"
}, {
"sTitle": "Edit"
},
{ "sTitle": "Delete" }],
"aaSorting": [[0, "asc"]],
aoColumnDefs: [
{ "bSortable": true, "aTargets": [0] },
{ "bSortable": false, "aTargets": [1, 2, 3, 4] }
],
bJQueryUI: true,
aaData: []
};
for (var key in dbStuff) {
$scope.options.aaData.push([dbStuff[key].name,
dbStuff[key].price,
dbStuff[key].description,
dbStuff[key].wanna,
dbStuff[key].Edit,
dbStuff[key].Delete]);
}
});
}]);
//service
dialogApp.service('EkgService', function ($q,$compile) {
var getData=$q.defer();
this.GetJson= function () {
var data=[
{
"name": "Stuff1",
"price": 10000000.00,
"description": "Expensive Stuff",
"wanna": "buy",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff2",
"price": 20000000.00,
"description": "Oh my...",
"wanna": "have money",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff1",
"price": 10000000.00,
"description": "Expensive Stuff",
"wanna": "buy",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff2",
"price": 20000000.00,
"description": "Oh my...",
"wanna": "have money",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff1",
"price": 10000000.00,
"description": "Expensive Stuff",
"wanna": "buy",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff2",
"price": 20000000.00,
"description": "Oh my...",
"wanna": "have money",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff1",
"price": 10000000.00,
"description": "Expensive Stuff",
"wanna": "buy",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff2",
"price": 20000000.00,
"description": "Oh my...",
"wanna": "have money",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff1",
"price": 10000000.00,
"description": "Expensive Stuff",
"wanna": "buy",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete":"<button
onclick=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff2",
"price": 20000000.00,
"description": "Oh my...",
"wanna": "have money",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff1",
"price": 10000000.00,
"description": "Expensive Stuff",
"wanna": "buy",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff2",
"price": 20000000.00,
"description": "Oh my...",
"wanna": "have money",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Stuff1",
"price": 10000000.00,
"description": "Expensive Stuff",
"wanna": "buy",
"Edit": "<button
data-ng-click=\"botaoEdit(stuff)\">Edit</button>",
"Delete": "<button
data-ng-click=\"botaoDelete(stuff)\">Delete</button>"
},
{
"name": "Zinger",
"price": 20000000.00,
"description": "Oh my...",
"wanna": "have money",
"Edit":"<button ng-click=\"botaoEdit('stuff')\">Edit</button>",
"Delete":"<button
onclick=\"botaoDelete('stuff')\">Delete</button>"
}
];
getData.resolve(data);
return getData.promise;
};
});
ng-click is not working
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
