如何使用 ng-click 从另一个函数调用一个函数？答案

【问题标题】：How to call a function from another function, with ng-click?如何使用 ng-click 从另一个函数调用一个函数？
【发布时间】：2017-03-13 11:13:13
【问题描述】：

 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

感谢您的帮助，效果很好。

【问题讨论】：

标签： angularjs

【解决方案1】：

EDIT：添加了 sn-p 用于演示 $compile

的用法

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

重要：这和你的代码的区别可能是你的renderWith只是把参数当作一个简单的html节点而不是一个jQuery/ jQlite 对象。如果是这种情况，你不能做你想做的事情。您可能需要为此找到解决方法。例如：您可以为DTColumnBuilder 返回的对象的结果设置一个选择器（即：id），然后 $compile 该 html 节点与我在 sn 中显示的方式相同-p。

原帖

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

【讨论】：

它返回一个包含两个对象的数组
那些对象是 jQlite 对象 并且对象是两个链接。不是吗？第一个是带有showCase.edit 呼叫的那个，不是吗？好吧，这个应该在点击时执行那个函数。不同之处在于，由于内容是由 AngularJS 编译的，因此该调用应该正确执行
在视图中显示 [Object object]，我理解的是 2 个按钮，但它不会将它们作为按钮返回，而是作为文本返回。它们应该是按钮。
好的，让我检查一下。稍后我会给你一些反馈
@JG_GJ，我对我的答案进行了编辑。我认为你的代码的关键点是接受你的DTColumnBuilder 的renderWith 函数，$compile 服务返回一个 jQlite/jQuery 对象，这就是你看到[object] [object] 表达式的原因跨度>

【解决方案2】：

对我来说，这似乎是一个范围问题。这意味着在运行时，当按钮被点击时，它找不到编辑功能。

如果在 vm.usario = {}; 下添加这一行；

vm.edit = edit;

然后将您的 ng-click="showCase.edit( 更改为

ng-click="vm.edit( ...

那么按钮应该可以找到功能了。

【讨论】：