使用angular ui routing和ocLazyLoad加载模块和工厂文件

时间:2015-08-18 10:41:12

标签: angularjs angular-ui-router oclazyload

i'使用角度ui路由和ocLazyLoad根据选择的统计信息加载附录文件,如下面的代码所示

我的问题是:

当我加载新状态并单击刷新某些时间工厂未初始化 - 我认为这是因为在启动控制器之前文件没有完全加载 -

我还尝试合并同一个ocLazyLoad函数中的所有文件并使用serie : true但是dosenot工作

是否正确使用了ocLazyLoad

我有以下模块

  angular.module('app', [ "oc.lazyLoad"]);
  angular.module("app.inventory", []);
  angular.module("app.sales", []);

这是路由

.state("invoicesAddEdit", {
          url: "/invoice/:invoiceId",
          templateUrl: "app/components/sales/invoice/views/invoiceAddEdit.view.html",
          controller: "InvoiceAddEditController",

          resolve: {
              invoiceId: ['$stateParams', function ($stateParams) {
                  return $stateParams.invoiceId;
              }],
              settings: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.settings",
                      files: [
                              "app/components/settings/settings.module.js",
                              "app/components/settings/currency/services/currency.factory.js",
                              "app/components/settings/deliveryMan/services/deliveryMan.factory.js",

                      ]
                  })
              }],

              inventory: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.inventory",
                      files: [
                              "app/components/inventory/inventory.module.js",
                              "app/components/inventory/customer/services/customer.factory.js",
                              "app/components/inventory/store/services/store.factory.js",
                              "app/components/inventory/product/services/product.factory.js",

                      ]
                  })
              }],
              purchasing: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.purchasing",
                      files: [
                              "app/components/purchasing/purchasing.module.js",
                              "app/components/purchasing/purchaseOrder/services/purchaseOrder.factory.js",

                      ]
                  })
              }],
              sales: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.sales",
                      files: [
                              "app/components/sales/sales.module.js",
                              "app/components/sales/representative/services/representative.factory.js",

                              "app/components/sales/invoice/services/invoice.factory.js",
                              "app/components/sales/invoice/controllers/invoiceAddEdit.controller.js",

                      ]
                  })
              }],
          }
      })

1 个答案:

答案 0 :(得分:0)

尝试将oCLazy Load作为deps注入,并在html中的特定标记之前插入所需的文件,如下所示:

      resolve: {
          invoiceId: ['$stateParams', function ($stateParams) {
              return $stateParams.invoiceId;
          }],
          deps: ['$ocLazyLoad', function ($ocLazyLoad) {
              return $ocLazyLoad.load({
                 name: "app.settings",
                 insertBefore: '#ng_load_plugins_before', 
                 files: [
                          "app/components/settings/settings.module.js",
                          "app/components/settings/currency/services/currency.factory.js",
                          "app/components/settings/deliveryMan/services/deliveryMan.factory.js",

                  ]
              })
          }],

将以下链接添加到html页面的标题或视图:

  <link id="ng_load_plugins_before"/>