How to call a function from another function, with ng-click? - angularjs

Question

var vm = this;
vm.dt_data = [];
vm.item = {};
vm.edit = edit;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('initComplete', function() {
$timeout(function() {
$compile($('.dt-uikit .md-input'))($scope);
})
})
.withPaginationType('full_numbers')
.withOption('createdRow', function (row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
})
.withOption('ajax', {
dataSrc: function(json) {
json['draw']=1
json['recordsFiltered'] = json.records.length
json['recordsTotal'] =json.records.length
console.log(json)
return json.records;
},
url: 'http://localhost:808/sistemadrp/public/ws/usuarios',
type: 'GET',
})
//.withDataProp('records')
.withOption('processing', true)
.withOption('serverSide', true);
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('Id'),
DTColumnBuilder.newColumn('usuario').withTitle('Usuario'),
DTColumnBuilder.newColumn('nombre').withTitle('Nombre'),
DTColumnBuilder.newColumn('email').withTitle('Email'),
DTColumnBuilder.newColumn('telefono').withTitle('Telefono'),
DTColumnBuilder.newColumn('estado').withTitle('Estado'),
DTColumnBuilder.newColumn('created_at').withTitle('Creado'),
DTColumnBuilder.newColumn(null).withTitle('Acciones').notSortable().renderWith(function(data,type,full){
vm.item[data.id] = data;
return ' <a href="#" data-uk-modal="{target:\'#modal_header_footer\'}" ng-click="showCase.edit(showCase.item[' + data.id + '])">'+
' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>'+
' <a href="#" data-uk-modal="{target:\'#modal_header_footer_eliminar\'}" ng-click="showCase.edit(showCase.item[' + data.id + '])">'+
' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i></a>';
})
];
Table:
<div class="md-card-content" ng-controller="dt_default as showCase">
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="uk-table" cellspacing="0" width="100%">
</table></div>
With the answer I was given here to make use of $ compile already works this way
.withOption('createdRow', function (row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
})
Now when clicking the button I even call a modal and I command the object to make use of the ng-model
Thanks for the help, it works well.

Answer 1

EDIT: Added snippet for demonstrating the usage of $compile
In the html there is only a body tag for initialising the app and a div for initialising the controller.
In foo controller, two link are created as simple strings but with two ng-click respectively and then compiled with the $compile service. The result of that is then appended to the div which id is parent created as jQlite object (important aspect here!), so when the links are clicked the functions on their ng-click are executed (see console). It means AngularJS as interpreted properly the compiled html.
IMPORTANT: The difference between this and your code may be that your renderWith just take the parameter as a simple html node and not a jQuery/jQlite object. If that's the case you can not do what you're trying to do this way. You probably will need to find a workaround for this. For example: you could set a selector (i.e.: an id) for the result of the object returned by the DTColumnBuilder and then $compile that html node the same way I show in the snippet.
Original post
You should use the $compile service. Modify your function like this:
function actionsHtml(data, type, full, meta){
vm.usuario[data.id] = data;
var html = ' <i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i>'+
' <i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i>';
return $compile(angular.element(html))($scope);
}
Snippet
angular.module('myapp', [])
.controller('foo', function($scope, $compile) {
var html = "<a class='hand' ng-click='hello()'><strong>Hi</strong> <small>(Click Me and take a look at console)</small></a>" +
"<br/> <hr/>" +
"<a class='hand' ng-click='goodby()'><strong>Goodby</strong> <small>(Click Me and take a look at console)</small></a>";
/*
* important!! if you don't use the angular.element syntaxt below, and instead you just use
* 'document.getElementById('parent') = $compile(html)($scope)', for instance, it will be shown something like '[object], [object]'
*/
angular.element(document.getElementById('parent')).append($compile(html)($scope));
$scope.hello = function() {
console.log("Hi there!")
}
$scope.goodby = function() {
console.log("Goodby!")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style type="text/css">
.hand {
cursor: hand;
cursor: pointer;
}
</style>
<body ng-app="myapp">
<div ng-controller="foo">
<div id="parent"></div>
</div>
</body>

Answer 2

It looks like a scope issue to me.
This means at run time, when the button is clicked, it cannot find the edit function.
If you add this line below vm.usario = {};
vm.edit = edit;
Then change your ng-click="showCase.edit( to be
ng-click="vm.edit( ...
Then the button should be able to find the function.