javascript - 使用工厂作为 Angular 数据表中的源数据不起作用

Question

可以使用工厂作为 Angular 数据表中的源数据吗？

基本上，我希望返回变量中的数据并将其用作源数据。

已更新(2016 年 6 月 22 日)

现在这是我的工厂:

statisticsModule.factory('globalFactory', function($rootScope, $http){

  var globalFactory = {};

  globalFactory.getUrl = function(){
    return $http.get('../statistics/php/config_statistics.json');
  };

  return globalFactory;

});

这是我的 Controller

statisticsModule.controller("dataController", dataController); //Fin controlador

  function dataController($scope, $http, globalFactory, DTOptionsBuilder, DTColumnBuilder){
    //Promise con el factory
    globalFactory.getUrl().then(function(response){

      //Obtener data
      var urlGlobal = response.data;
      //Filtrar data. arrayReportBD : Arreglo con las URL de los reportes
      var deserialize = angular.fromJson(urlGlobal.config.graph_conf_array.arrayReportBD);
      //Data Distribución de Estatus
      var urlStatus = deserialize[0];

      //Obtener data de Distribución de Estatus
      $http.get(urlStatus).success(function(data){

      console.log(data);

      var vm = this;
      vm.dtOptions = DTOptionsBuilder.fromSource(data)
      .withDOM('lfrtip')
      .withPaginationType('full_numbers')
      .withLanguage({
        "sEmptyTable":     "No hay datos para cargar en la tabla",
        "sInfo":           "Mostrando _START_ de _END_ de _TOTAL_ entradas",
        "sInfoEmpty":      "Mostrando 0 de 0 de 0 entradas",
        "sInfoFiltered":   "(filtradas _MAX_ entradas totales)",
        "sInfoPostFix":    "",
        "sInfoThousands":  ",",
        "sLengthMenu":     "Mostrar _MENU_ entradas",
        "sLoadingRecords": "Cargando...",
        "sProcessing":     "Procesando...",
        "sSearch":         "Buscar:",
        "sZeroRecords":    "No se encontraron registros",
        "oPaginate": {
            "sFirst":    "Primera",
            "sLast":     "Última",
            "sNext":     "Siguiente",
            "sPrevious": "Anterior"
          },
          "oAria": {
            "sSortAscending":  ": activar para ordenar de forma ascendente",
            "sSortDescending": ": activar para ordenar de forma descendente"
          }
        });
        vm.dtColumns = [
          DTColumnBuilder.newColumn('gob_code').withTitle('Cód. Gob.'),
          DTColumnBuilder.newColumn('fci_code').withTitle('Cód. FCI'),
          DTColumnBuilder.newColumn('name').withTitle('NOMBRE'),
          DTColumnBuilder.newColumn('status').withTitle('ESTATUS')
        ];

      }).error(function(err){

      });//Fin $http

    });//Fin promise

  }//Fin función

警察局:

1. 事实上，我的数据表脚本位于正确的位置，如果我使用直接 URL 中的数据作为源， View 将完美加载。
2. 我已经在 html 标签中添加了 ng-app
3. 我希望构建数据表的函数使用过滤后的数据

Answer 1

**已于 2015 年 6 月 23 日解决**

这很难，但我终于解决了!

1. 第一步:创建模块:

var statisticsModule = angular.module("statisticsModule", ['datatables', 'datatables.bootstrap']);

//Bootstrap was added for best views

第二步:创建工厂

statisticsModule.factory('globalFactory', function($rootScope, $http){

  var globalFactory = {};

  globalFactory.getUrl = function(){
    return $http.get('../statistics/php/reports/r_reports_status.php').success(function(data){
      });
  };

  return globalFactory;

});

//Factory pointing to specific URL that contains the data

第三步:创建 Controller

statisticsModule.controller("dataController", dataController);

  function dataController(DTOptionsBuilder, DTColumnBuilder, $scope, globalFactory){


      var vm = this;
      //Return data from factory
      vm.dtOptions = DTOptionsBuilder.fromFnPromise(function(){
        return globalFactory.getUrl().then(function(response){
          return response.data;
        })
      })
      .withDOM('lfrtip')
      .withPaginationType('full_numbers')
      //Language Spanish (optional)
      .withLanguage({
        "sEmptyTable":     "No hay datos para cargar en la tabla",
        "sInfo":           "Mostrando _START_ de _END_ de _TOTAL_ entradas",
        "sInfoEmpty":      "Mostrando 0 de 0 de 0 entradas",
        "sInfoFiltered":   "(filtradas _MAX_ entradas totales)",
        "sInfoPostFix":    "",
        "sInfoThousands":  ",",
        "sLengthMenu":     "Mostrar _MENU_ entradas",
        "sLoadingRecords": "Cargando...",
        "sProcessing":     "Procesando...",
        "sSearch":         "Buscar:",
        "sZeroRecords":    "No se encontraron registros",
        "oPaginate": {
            "sFirst":    "Primera",
            "sLast":     "Última",
            "sNext":     "Siguiente",
            "sPrevious": "Anterior"
          },
          "oAria": {
            "sSortAscending":  ": activar para ordenar de forma ascendente",
            "sSortDescending": ": activar para ordenar de forma descendente"
          }
        })
        //More options for best views
        .withDisplayLength(1)
        .withOption('responsive', true)
        .withBootstrap();
    //BELOW GOES vm.dtColumns and } that ends the function

最后，第四步:投入 View

<!--THIS IS THE ORDER-->

<head>
  
  <!--JQUERY SCRIPT-->
  <!--JQUERY DATATABLES SCRIPT-->
  <!--ANGULAR SCRIPT-->
  <!--ANGULAR DATATABLE SCRIPT-->
  <!--ANGULAR DATATABLE CSS-->
  <!--DATATABLES BOOTSTRAP CSS-->
  <!--DATATABLES RESPONSIVE CSS-->
  <!--MODULE-->
  <!--CONTROLLER-->
  <!--FACTORY-->
  <!--ANGULAR DATATABLES BOOTSTRAP SCRIPT-->
  <!--BOOTSTRAP SCRIPT-->
  
</head>

<body>
  
  <div ng-controller="dataController as showCase">
    <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="table table-striped table-bordered"></table>
  </div>
  
  <!--DATATABLES RESPONSIVE SCRIPT-->
  
</body>