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

尝试使用自定义指令动态添加ng-json-export-excel并触发点击 - ＆gt;就像在这个完整的可运行 DEMO FIDDLE 中一样。这样你就不需要一个“隐藏的元素”。

视图

<div ng-controller="MyCtrl">
  <button ng-click="loadData()" 
          data="data" 
          filename="'export-excel'" 
          report-fields="{ body: 'Body' }" 
          loaded="loaded"
          my-directive>
    Load data async
  </button>
</div>

AngularJS应用程序

var myApp = angular.module('myApp', ["ngJsonExportExcel"]);

myApp.controller('MyCtrl', function($scope, $timeout, $http) {

  $scope.loaded = false;
  $scope.data = [];

  $scope.loadData = function() {
    if (!$scope.loaded) {
       $http.get('https://jsonplaceholder.typicode.com/posts').then(function (response) { 
          $scope.data = response.data;
          $scope.loaded = true;
       });
    }
  }
});

myApp.directive('myDirective', function($compile, $timeout) {
  return {
    restrit: 'A',
    replace: false,
    scope: {
      loaded: "=",
      data: "="
    },
    link: function(scope, element, attrs) {
      scope.$watch("loaded", function(newValue, oldValue) {
        if (newValue && newValue !== oldValue) {
          element.attr('ng-json-export-excel', '');
          element.removeAttr('my-directive');
          $compile(element)(scope);
          $timeout(function() {
            element.triggerHandler('click');
          });
        }
      });
    }
  }
});

Answer 2

如果您打开插件的源代码：

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的相同服务来改进它。您将允许未来的用户轻松解决相同的问题。

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

2 个答案:

视图

AngularJS应用程序