如何通过ng-click从另一个函数调用一个函数？

一尘不染

如何通过ng-click从另一个函数调用一个函数？

angularjs

 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>';
              })                    
          ];

表：

 <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>

有了答案，我在这里得到了利用$ compile的这种方式

.withOption('createdRow', function (row, data, dataIndex) {
                $compile(angular.element(row).contents())($scope);
            })

现在，当单击按钮时，我什至调用一个模态，并命令对象使用ng-model

感谢您的帮助，它运作良好。

阅读 246

2020-07-04

共1个答案

一尘不染

编辑：添加了用于演示 $
compile 用法的代码段

在html中，只有一个body用于初始化应用程序的标签和一个用于初始化控制器的div。
在foocontroller中，两个链接被创建为简单字符串，但ng-click分别具有两个，然后使用$ compile服务进行编译。然后，它的结果被附加到div其id被parent作为jQlite对象（这里重要的方面！）创建的，所以当链接被点击的功能对他们ng-click执行（见控制台）。这意味着AngularJS被正确解释为已编译的html。

重要说明 ：此代码与您的代码之间的区别可能是您renderWith只是将参数作为简单的html节点而不是 jQuery / jQlite
对象。如果是这种情况， 您将无法 通过这种方式进行尝试。您可能需要为此找到解决方法。例如：您可以id为所返回的对象的结果设置一个选择器（即an
）DTColumnBuilder，然后以与我在代码段中显示的方式相同的方式对该HTML节点进行 $ compile 。

原始帖子

您应该使用$
compile服务。像这样修改您的功能：

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);
}

片段

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>

2020-07-04