0

我试图懒惰地配置自定义类型的angular-formlywithocLazyLoad但我不能。执行时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 extension types

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

4

1 回答 1

0

@kentcdodds 我设法解决了我认为的这个特殊问题，但我不是 100% 确定，但是在这个例子中它正在工作。我的问题的解决方案是在加载setType后调用函数。formlyBootstrap

实现这一点的代码如下：

$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

于 2015-12-29T06:34:20.733 回答