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

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">&#xE872;</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 = ' <a href="#" data-uk-modal="{target:'#modal_header_footer'}" ng-click="showCase.edit(showCase.usuario[' + 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'}"><i class="md-icon material-icons md-bg-red-900 uk-text-contrast">&#xE872;</i></a>';

  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>