使用工厂作为角度数据的源数据不起作用 [英] Using a factory as source data in angular-datatables doesn't work

查看：166
本文介绍了使用工厂作为角度数据的源数据不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

可以使用一个工厂作为角度数据库中的源数据？



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

UPDATED（06/22/2016）



现在这是我的工厂： 



  statisticsModule.factory（'globalFactory'，function（$ rootScope，$ http）{var globalFactory = {} ; globalFactory.getUrl = function（）{return $ http.get（'../ statistics / php / config_statistics.json'）;}; return globalFactory;}）;



这是我的控制器



  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）; // DataDistribuciónde Estatus var urlStatus = deserialize [0]; // Obtener data deDistribució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： （filter），sInfoPostFix：，sInfoThousands：，，sLengthMenu：Mostrar _MENU_ entradas，sLoadingRecords：Cargando ...，sProcessing：Procesando ...，sSearch：sZeroRecords：不存在注册，oPaginate：{sFirst：Primera，sLast：Última，sNext Siguiente，sPrevious：前辈}，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} // Finfunción

div>



PD：


    < ve数据表脚本正确的位置，确实，如果我使用来自直接URL的数据作为源的视图加载完美。
  1. 我已经添加ng应用程序在html标签

  2. 我希望构建数据表的函数使用数据过滤


解决方案

** SOLVED 06/23/2015 **



很难，但终于可以解决了！ >


  1. 第一步：创建模块： 

  var statisticsModule = angular.module（statisticsModule，['datatables'，'datatables.bootstrap']）; / /靴子添加陷阱以获取最佳视图


  1. STEP TWO：CREATE FACTORY 

  statisticsModule.factory（'globalFactory'，function（$ rootScope，$ http）{var globalFactory = {}; globalFactory.getUrl = function（）{return $ http.get（'../ statistics / php / reports / r_reports_status.php'）。success（function（data）{}）; };返回globalFactory;}）; //工厂指向包含数据的特定URL


  1. 第三步：创建控制器 

  statisticsModule.controller（dataController，dataController）;函数dataController（DTOptionsBuilder，DTColumnBuilder，$ scope，globalFactory）{var vm = this; //从工厂返回数据vm.dtOptions = DTOptionsBuilder.fromFnPromise（function（）{return globalFactory.getUrl（）。then（function（response）{return response.data;}）}）.withDOM（'lfrtip'）.withPaginationType （'full_numbers'）//语言西班牙语（可选）.withLanguage（{sEmptyTable：无干草数据，sInfo：Mostrando _START_ de _END_ de _TOTAL_ entradas，sInfoEmpty： sInfoPostFix：，sInfoThousands：，，sLengthMenu：Mostrar _MENU_ entradas，sLoadingRecords，sInfoPostFix ：Cargando ...，sProcessing：Procesando ...，sSearch：...：sZeroRecords：没有encontraron注册，oPaginate：{sFirst：Primera ，sLast：Última，sNext： Siguiente，sPrevious：前辈}，oAria：{sSortAscending：：activar para ordenar de forma ascendente，sSortDescending：：activar para ordenar de forma descendente}）//更多选项最佳视图.withDisplayLength（1）.withOption（'respond'，true）.withBootstrap（）; // BELOW GOES vm.dtColumns和}结束函数




  1. 最后一步，第四步：输入视图 

 <！ - 这是命令 - >< head> <！ -  JQUERY SCRIPT  - > <！ -  JQUERY DATATABLES SCRIPT  - > <！ - 角色脚本 - > <！ - 角度数据脚本 - > <！ -  ANGULAR DATATABLE CSS  - > <！ -  DATATABLES BOOTSTRAP CSS  - > <！ -  DATATABLES RESPONSIVE CSS  - > <！ - 模块 - > <！ - 控制器 - > <！ - 工厂 - > <！ - 角度数据库引擎脚本 - > <！ -  BOOTSTRAP SCRIPT  - > < / head>< body> < divng-controller =dataController as showCase> < table datatable =dt-options =showCase.dtOptionsdt-columns =showCase.dtColumnsclass =table table-striped table-bordered>< / table> < / div> <！ - 数据库响应脚本 - > < / body>


It's possible to use a factory as source data in angular-datatables?

Basically, I wish to return data in a variable and use it as source data.

UPDATED (06/22/2016)

Now this is my factory:

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

  var globalFactory = {};

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

  return globalFactory;

});

And this is my 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

P.D.:

  1. I've datatables-scripts in correct position, indeed, if I use the data from a direct URL as source the view loads perfectly.
  2. I've already added the ng-app in html tag
  3. I want that the function to build datatables use data filtered

解决方案

**SOLVED 06/23/2015**

It was hard, but finally I could solve it!

  1. STEP ONE: CREATE MODULE:

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

//Bootstrap was added for best views

  1. STEP TWO: CREATE FACTORY

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

  1. STEP THREE: CREATE 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

  1. AND FINALLY, STEP FOUR: PUT INTO 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>

这篇关于使用工厂作为角度数据的源数据不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆