我如何才能懒惰地配置角度形式的类型

How can I lazy configure types of angular formly?

本文关键字：类型 配置      更新时间：2023-09-26

我试图用ocLazyLoad延迟配置angular-formly的自定义类型，但我做不到。当执行state时，我试图调用setType函数，但在此之后页面不会加载任何内容。当我删除setType函数时，一切都很好。有什么方法可以延迟配置formly类型吗？

formlyConfig.setType({
  name: 'input',
  template: '<input ng-model="model[options.key]" />'
});

大致来说，这是一个例子：

//ocLazyLoad Configurations
$ocLazyLoadProvider.config({
    events: true,
    debug: true,
    modules: [
        {
            name: "formly",
            files: [ "Scripts/formly/angular-formly.js" ]
        },
        {
            name: "formlyBootstrap",
            files: [ "Scripts/formly/angular-formly-templates-bootstrap.js" ]
        }
    ]
});
//Ui-Router Configs
$stateProvider
.state("admin", {
    abstract: true,
    url: "/admin",
    templateUrl: "App/admin/templates/content.html",
    resolve: {
        loadApiCheck: ["$ocLazyLoad", function ($ocLazyLoad) {
            return $ocLazyLoad.load("Scripts/formly/api-check.js");
        }],
        loadFormly: ["loadApiCheck", "$ocLazyLoad", function (loadApiCheck, $ocLazyLoad) {
            return $ocLazyLoad.load("formly");
        }],
        loadFormlyBootstrap: ["loadFormly", "formlyConfig", "$ocLazyLoad", function (loadFormly, formlyConfig, $ocLazyLoad) {
            //* * *
            //After formlyConfig.setType() nothing gets executed
            //* * *
            debugger;
            formlyConfig.setType({
                name: 'input',
                template: '<input ng-model="model[options.key]" />'
            });
            return $ocLazyLoad.load("formlyBootstrap");
        }]
    }
})
.state("admin.contact", {
    url: "/contact",
    controller: "contactCtrl",
    controllerAs: "vm",
    templateUrl: "App/admin/templates/contact.html",
    resolve: {
        loadFunctionalityFiles: ["$ocLazyLoad", function ($ocLazyLoad) {
            return $ocLazyLoad.load({
                serie: true,
                files: [
                    "App/admin/factories/userFactory.js",
                    "App/admin/controllers/contactController.js"
                ]
            });
        }]
    }
});

最后，这里是文档，以防万一：Angular Formly扩展类型

这里我做了一个plnkr测试用例

@kentcdods我想我设法解决了这个特定的问题，但我不能100%确定，但在这个例子中它是有效的。我的问题的解决方案是在加载formlyBootstrap之后调用setType函数。

实现这一点的代码如下：

$stateProvider
.state("admin", {
    abstract: true,
    url: "/admin",
    templateUrl: "content.html",
    resolve: {
        loadApiCheck: ["$ocLazyLoad", function($ocLazyLoad) {
            return $ocLazyLoad.load("//npmcdn.com/api-check@latest/dist/api-check.js");
        }],
        loadFormly: ["loadApiCheck", "$ocLazyLoad", function(loadApiCheck, $ocLazyLoad) {
            return $ocLazyLoad.load("formly");
        }],
        loadFormlyBootstrap: ["loadFormly", "$ocLazyLoad", "formlyConfig", function(loadFormly, $ocLazyLoad, formlyConfig) {
            return $ocLazyLoad
                .load("formlyBootstrap")
                .then(function() {
                    console.log("reached critical point...");
                    formlyConfigurations(formlyConfig);
                    console.log("passed critical point!");
                });
        }]
    },
    onEnter: ["$log", "$state", function($log, $state) {
        $log.info("state admin entered");
    }]
});

这是plnkr

相关文章：