javascript - AngularJS - 按钮 - 在依赖之前调用函数或指令

Question

我正在使用ngJsonExportExcel将 JSON 导出到 EXCEL 的依赖项。

我有另一个 PHP 文件，它根据按下的按钮从 sql 中获取数据，以及我想要导出的数据。

导出是由于按钮的属性而发生的。 我想要发生的是，当我按下按钮时，它首先加载数据，然后导出。

这是 AngularJS:

$scope.Export_to_csv = function (odid,hour) {
        $http.get("fetch-sms-list.php?odid="+odid+"&hour="+hour)
           .success(function (data) {
               $scope.smslist=data.result;
            });
    }

这是按钮(在表格中):

<tr ng-repeat="row in records | orderBy: sortType : sortReverse">
                    <td>{{ $index +1 }}</td>
                    <td>{{row.pname + " " + row.sname}}</td>
                    <td>{{row.areaname}}</td>
                    <td>{{row.oddate}}</td>
                    <td>{{row.odtime}}</td>
                    <td><button ng-click="Export_to_csv(row.ODid,row.odtime)" ng-json-export-excel data="smslist" report-fields="{'fname': 'Heder 1', 'sname': 'Header 2'}"
                                filename =" 'export-excel' " separator=","
                                class='btn btn-info'>
                            <i class="fa fa-file-excel-o" aria-hidden="true"></i></button></td>
                </tr>

但正如我所想 - 首先执行导出。

有办法解决吗？我更喜欢避免使用多个按钮，即使它们是隐藏的。

Answer 1

如果打开插件的源代码:

https://github.com/dtagdev1/json-export-excel/blob/master/src/json-export-excel.js

您将看到它仅充当指令/属性。没有服务，没有什么可以从外面打电话的。 所以你有几种方法:

1) 更改代码以动态添加指令并在解析 http 请求后编译它，将其从 HTML 中删除:

// note the add of $event
$scope.Export_to_csv = function ($event, odid,hour) {
        alert("fetch-sms-list.php?odid="+odid+"&hour="+hour);
        $http.get("fetch-sms-list.php?odid="+odid+"&hour="+hour)
           .success(function (data) {
               $scope.smslist=data.result;
               $event.currentTarget.attr('ng-json-export-excel', '');
               $compile($event.currentTarget.contents())($scope); // inject $compile
               // inject $timeout to be sure it's called after the compile
               $timeout(function () {
                  $event.currentTarget.triggerHandler('click');
               });
            });
    }

2) 创建您自己的指令来包装此指令，为 HTTP 请求的详细信息添加一个属性，并在其中执行 HTTP 请求，然后触发导出

3) 我的建议:创建一项服务来做到这一点。如果您打开该指令的源代码，您就拥有了所需的一切。您还可以为该插件创建 PR，以便使用无需使用 HTML 即可完成相同操作的服务来改进它。 您将让 future 的用户轻松解决同样的问题。