angularjs - 如何使用 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>

我在这里给出的答案是使用 $ compile 已经以这种方式工作

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

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

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

Answer 1

编辑 : 添加了演示 $compile 用法的片段

在 html 中只有一个 body用于初始化应用程序的标签和用于初始化 Controller 的 div。

在 foo Controller ，两个链接创建为简单的字符串，但有两个 ng-click分别然后用 $compile 服务编译。然后将结果附加到 div其中id是 parent创建为 jQlite 对象(这里很重要!)，所以当链接被点击时，其 ng-click 上的函数被执行(见控制台)。这意味着 AngularJS 正确解释了编译后的 html。

重要提示:这与您的代码之间的区别可能在于您的 renderWith只需将该参数作为一个简单的 html 节点而不是 jQuery/jQlite 对象。如果是这样的话 你不能以这种方式做你想做的事。您可能需要为此找到解决方法。例如:您可以为 id 返回的对象的结果设置一个选择器(即: DTColumnBuilder )然后按照我在代码段中显示的相同方式 $compile 那个 html 节点。

原帖

您应该使用 $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>