当前位置: 首页 > 面试题库 >

UI路由器中的ControllerProvider导致错误

干子瑜
2023-03-14
问题内容

我有一个,ui-router
StateProvider并且需要根据外部数据在控制器和视图之间进行选择,因此我使用TemplateProviderControllerProvider

如果我只有TemplateProvider它,一切都很好,但是当我添加时,ControllerProvider会出现此错误:

Error: [ng:areq] Argument 'fn' is not a function, got Object
http://errors.angularjs.org/1.3.1/ng/areq?p0=fn&p1=not%20aNaNunction%2C%20got%Object
    at REGEX_STRING_REGEXP (http://localhost:48510/Scripts/Vendor/Angular/1-angular.js:80:12)
    at assertArg (http://localhost:48510/Scripts/Vendor/Angular/1-angular.js:1577:11)
    at assertArgFn (http://localhost:48510/Scripts/Vendor/Angular/1-angular.js:1587:3)
    at annotate (http://localhost:48510/Scripts/Vendor/Angular/1-angular.js:3417:5)
    at invoke (http://localhost:48510/Scripts/Vendor/Angular/1-angular.js:4096:21)
    at Object.instantiate (http://localhost:48510/Scripts/Vendor/Angular/1-angular.js:4129:23)
    at http://localhost:48510/Scripts/Vendor/Angular/1-angular.js:8320:28
    at compile (http://localhost:48510/Scripts/Vendor/AngularUIRouter/angular-ui-router.js:3897:28)
    at invokeLinkFn (http://localhost:48510/Scripts/Vendor/Angular/1-angular.js:8081:9)
    at nodeLinkFn (http://localhost:48510/Scripts/Vendor/Angular/1-angular.js:7593:11)

undefined serviceName可能看起来有些像(它说有对象,但看起来像,undefined但是我不太擅长调试AngularJs

这是我的代码

.state('abstractParent.childState', {
    url: '/childState',
    controllerProvider: ['myService', function (myService) {
        return myService
          .isSpecificMember()
          .then(function (result) {  //this returns a promise of a bool.
            if (result.data) {
                return 'SpecificController';
            } else {
                return 'GeneralController';
            }
        })
    }],
    templateProvider: ['myService', '$templateFactory',
     function (myService, $templateFactory) {
        return myService.isSpecificMember().then(function(result) {
            if(result.data)
            {
                return $templateFactory.fromUrl('SpecificView');
            } else {
                return $templateFactory.fromUrl('GenericView');
            }
        })
    }],
    resolve: {
        thing: ['thingService', function (thingService) { 
            //this is only used in one of the controllers.
            return thingService.getThing();
        }]
    }})

编辑

基于RadimKöhlers答案的更改

    .state('abstractParent.childState', {
        url: '/childState',
        resolve: {
            controllerName: ['myService', function (myService) {
                return myService.isSpecificMember().then(function (result) {  //this returns a promise of a bool.
                    if (result.data) {
                        return 'SpecificController';
                    } else {
                        return 'GeneralController';
                    }
                })
            }],
            thing: ['thingService', function (thingService) { //this is only used in one of the controllers.
                return thingService.getThing();
            }]
        },
        controllerProvider: ['controllerName', function (controllerName) {
            return controllerName;
        }],
        templateProvider: ['myService', '$templateFactory', function (myService, $templateFactory) {
            return myService.isSpecificMember().then(function(result) {
                if(result.data)
                {
                    return $templateFactory.fromUrl('SpecificView');
                } else {
                    return $templateFactory.fromUrl('GenericView');
                }
            })
        }]
        })

新错误:

    Error: [$injector:unpr] Unknown provider: controllerNameProvider <- controllerName
    http://errors.angularjs.org/1.3.1/$injector/unpr?p0=controllerNameProvider%20%3C-%20controllerName
        at REGEX_STRING_REGEXP (1-angular.js:80)
        at 1-angular.js:3930
        at Object.getService [as get] (1-angular.js:4077)
        at 1-angular.js:3935
        at getService (1-angular.js:4077)
        at Object.invoke (1-angular.js:4109)
        at angular-ui-router.js:3465
        at processQueue (1-angular.js:12901)
        at 1-angular.js:12917
        at Scope.$get.Scope.$eval (1-angular.js:14110)

这至少需要版本0.2.14angular-ui-router.js


问题答案:

问题是,这controllerProvider只是必须返回 对象 代表controllerstring (它的名字)

http://angular-ui.github.io/ui-
router/site/#/api/ui.router.state。$
stateProvider

stateConfig.controllerProvider (可选) 功能

返回实际 控制器字符串的可 注入提供程序函数。

因此,我们无法兑现承诺…

但是有一个解决方案:

有一个可行的例子

我们可以使用内置的功能 解析 -通过使用异步功能来完成异步工作,并使其controllerProvider成为英雄-

  resolve: {
    controllerName: ['$stateParams', '$timeout','$q', 
        function ($stateParams, $timeout, $q)
        {
          var deferred = $q.defer();
           $timeout(function(){

            deferred.resolve('MyLazyRevealedCtrl');

          },250);
          return deferred.promise;
        }],

  },
  controllerProvider:['controllerName', function (controllerName)
  {
      return controllerName;
  }],

我们看到的是仅带有计时器的简化示例(扮演async的角色 .then() )。等待一会儿,然后返回解析的控制器名称。

controllerProvider 随后 (一旦全部解决) 只需要这一结果,并返回一个字符串。

在这里检查



 类似资料:
  • 我在我的本地主机上开发了一个laravel应用程序,运行非常好。我正试图使用Ubuntu 20.04上的nginx将其部署到AWS Lightsail实例上。我已经上传了我的laravel应用程序,并将nginx根目录更改为laravelapp/public。 主索引页(着陆页)工作正常,但我的路线都不工作(即 /login, /about等)。当我试图访问任何路线时,我得到一个404未找到错误。

  • 问题内容: 角度ui路由器的示例演示在起始页面具有以下链接: “ ui-router”的完整网址为或 “关于”的完整网址为或 当我使用durandalJS时,存在一个限制,即默认URL只是“ /”,不能有“ / ui-router”。 Angular ui路由器插件有相同的限制吗? 问题答案: 请参阅此处,默认路由有一个“其他”选项。

  • 我尝试将Codeigniter与AngularJS路由一起使用,它正在工作,但我需要不使用散列。我使用以下代码: 但当我刷新页面时,跳转到404。

  • 最终编辑:使用transcluded指令处理plunker。 编辑:我用第一个答案中给出的解决方案做了第一次撞击。它可以工作,但这不是期望的行为,因为模板包含所有的部分内容。 我用我希望达到的目标做了第二次尝试(但显然不起作用)。我认为这主要是因为模板不是分部的父级,但它包含在其中,所以ui路由器不太理解我想要什么。 在此方面的任何帮助都将不胜感激! 我们正在建立一个网站与角材料和UI路由器,我们

  • 嗨,我不确定这是一个期望的行为还是一个bug。 这是一个空的create react应用程序示例,带有 版本: 反应:^16.13.1, react-dom:^16.13.1, react-router-dom:^5.2.0, 反应脚本:3.4.1 部件: /-对于主部件 /触点-用于触点组件 这里提供小提琴 多次单击“主页”链接会显示一条

  • 问题内容: 我正在尝试测试一些视图,这些视图用于链接到应用程序中的其他状态。在我的测试中,我触发了对此元素的点击,如下所示: 如果状态切换为,该如何测试?在我的控制器中像这样使用时,这很容易: 但是当我使用时,我不知道要监视什么对象。如何验证我的应用程序处于正确状态? 问题答案: 我自己找到的。在查看了角度ui路由器源代码后,我在指令中找到了以下行: 当元素收到点击时,会包装在回调中。因此,在测试