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

【问题标题】：AngularJS - button - call function or directive before dependencyAngularJS - 按钮 - 在依赖之前调用函数或指令
【发布时间】：2017-05-21 10:15:43
【问题描述】：

我正在使用 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>

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

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

【问题讨论】：

对不起。我正在寻找，所以我没有在工作（这个代码来自我的工作）。我从家里看到了你的答案，但我无法尝试。最后，我放了另一个隐藏按钮，并在加载数据后按下它。

标签： javascript html angularjs json excel

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

【讨论】：

【解决方案2】：

尝试使用自定义指令，动态添加您的ng-json-export-excel 并触发点击 -> 就像在这个完整的可运行 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');
          });
        }
      });
    }
  }
});

【讨论】：