Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

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

 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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...