AngularJs:$routeProvider与动态控制器名称赢得't负载

AngularJs: $routeProvider with dynamic controller name won't load

本文关键字：负载 routeProvider 动态 控制器 动态控制 AngularJs      更新时间：2023-09-26

AngularJs文档说，您可以为controller&当配置$routeProvider时，路由对象中的templateUrl，但是当使用函数基于$location参数动态确定控制器时，我遇到了一个问题。我有以下路线配置：

$routeProvider
       .when( '/workspace/:workspaceId/product/:productId/item/:itemType/:itemId/edit', {
        templateUrl: function ( param ) {
          switch ( param.itemType ) {
            case 'topic':
              return 'topic.tpl.html';
            case 'course':
              return 'course.tpl.html';
          }
          throw new Error( "Unknown product item type '" + param.itemType + "'" );
        },
        controller: function ( param ) {
          switch ( param.itemType ) {
            case 'topic':
              return 'TopicController';
            case 'course':
              return 'CourseController';
          }
          throw new Error( "Unknown product item type '" + param.itemType + "'" );
        }
      } );

当加载应用程序时，我得到以下错误：

Error: [$injector:unpr] Unknown provider: paramProvider <- param

我是不是遗漏了什么明显的东西？将控制器切换为使用字符串而不是函数可以解决此问题。

看起来有些人以前遇到过这个问题（例如这里），但我很困惑为什么这不起作用，因为文档表明它应该起作用。

如有任何帮助，我们将不胜感激！

约瑟夫。

我认为部分问题可能是，当您向控制器提供函数而不是字符串时，它不是一个旨在返回控制器名称的函数，而是一个旨在充当控制器的函数。

看一眼以下内容-路线/动态控制器的行为似乎有效。我使用$controller按名称实例化控制器。因此，在这种情况下，我实际上并没有动态返回不同的控制器，而是在我提供给$routeProvider的anon控制器中实例化一个新的控制器。

这是否是实现预期最终结果的最佳方式可能是另一回事。）angular ui/ui路由器项目非常受欢迎。

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/workspace/:workspaceId/product/:productId/item/:itemType/:itemId/edit', {
        template: '<h1>{{title}}</h1><p>{{test}}</p>',
        controller: function($scope, $routeParams, $controller) {
          switch ($routeParams.itemType) {
            case 'topic':
              $controller('TopicController', {
                $scope: $scope
              });
              break;
            case 'course':
              $controller('CourseController', {
                $scope: $scope
              });
              break;
          }
        }
      })
      .when('/', {
        template: '<h1>Home</h1><p>{{test}}</p>',
        controller: 'home'
      });
  }).controller('home', function($scope) {
    $scope.test = 'Hello world.';
  }).controller('TopicController', function($scope) {
    $scope.title = "Topic";
    $scope.test = 'Success!';
  }).controller('CourseController', function($scope) {
    $scope.title = "Course";
    $scope.test = 'Success again!';
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.min.js"></script>
<div ng-app="myApp">
  <a href="#/workspace/1/product/1/item/topic/1/edit">Topic</a>
  <a href="#/workspace/1/product/1/item/course/1/edit">Course</a>
  <div ng-view />
</div>

相关文章：