无法使用 ui 路由器解析状态

Posted 2023-05-09

【中文标题】无法使用 ui 路由器解析状态

【英文标题】：Cannot Resolve State with ui router

【发布时间】：2017-04-10 07:32:00

【问题描述】：

我在从数据库中提取页面后尝试使用 ui 路由器设置状态，但每次我尝试单击 sref 链接时都会出现此错误。这里是 app/app.js 和 app/index.html。

angular.js:10467 Error: Could not resolve 'management' from state ''
    at Object.z.transitionTo (angular-ui-router.min.js:7)
    at angular-ui-router.min.js:7
    at angular.js:19612
    at e (angular.js:5964)
    at angular.js:6243

(function () 
  'use strict';

  // global vars
  var $stateProviderRef     = null;
  var $urlRouterProviderRef = null;

  angular
    .module('app', [
      'loading',
      'sidebar',
      'prism',
      'ui.router',
      'permission',
      'permission.ui',
      'uiSwitch',
      'smart-table',
      'xeditable',
      'angular.filter',
      'ngFileSaver',
      'ngtweet',
      'ngLodash'
    ])
    .config(config)
    .run(run);

  function config($stateProvider, $urlRouterProvider, $locationProvider) 
    // create delay intercept
    $urlRouterProvider.deferIntercept();

    // TODO => do html5Mode
    // $locationProvider.html5Mode(true);
    // $locationProvider.hashPrefix('!');

    // // default route
    // $urlRouterProvider.otherwise(function($injector) 
    //   var $state = $injector.get("$state");
    //   $state.go('dashboard');
    // );

    $stateProviderRef = $stateProvider;
    $urlRouterProviderRef = $urlRouterProvider;
  

  function run(lodash, $http, $rootScope, $window, $location, $urlRouter, $sidebar, AdminService, ForumService, PermRoleStore, PermPermissionStore) 
    var _ = lodash; // create LoDash
    $rootScope.$sidebar = $sidebar; // make sidebar accessible in view

    // add JWT token as default auth header
    $http.defaults.headers.common['Authorization'] = 'Bearer ' + $window.jwtToken;

    /**
      * @name   AdminService.GetPages
      * @desc   Creating new states for pages
      * @param  null
      * @return object  $stateProviderRef.state() - new state
    */
    AdminService.GetPages().then(function (pages) 
      $rootScope.pages = pages; // save all pages for view

      // loop through each page and set state
      $.each(pages, function(i, page)
        // creating state object
        var stateObj = 
          url: `/$page.slug`,
          templateUrl: `$page.slug/index.html`,
          controller: `$page.name.IndexController`,
          controllerAs: 'vm',
          data: 
            icon: page.icon,
            activeTab: page.name
          
        ;

        // add permisions if set
        if (page.perm) 
          // create array from database strings
          var permissions = $.map(page.perm.split(','), function(value)
            return value.replace(' ','');
          );

          // reset the permissions in $rootScope
          $rootScope.pages[i].perm = permissions;

          stateObj.data.permissions = 
            only: permissions,
            redirectTo: `$page.redirect`
          
         else 
          // reset the permissions in $rootScope to an empty array
          $rootScope.pages[i].perm = [];
        

        // add page to state provider
        $stateProviderRef.state(page.name, stateObj);
      );

      // sync the app
      $urlRouter.sync();
      $urlRouter.listen();
    );

    // TODO => Delete when AdminService works
    PermRoleStore.defineManyRoles(
      "Admin": function()
        return _.includes([1,5], $window.rankID);
      ,
      "Management": function()
        return _.includes([2,3], $window.rankID);
      ,
      "Member": function()
        return _.includes([2,3,4,6,9,10,11,12,13], $window.rankID);
      ,
      "ESportManagement": function()
        return _.includes(11, $window.rankID);
      ,
      "ESportMember": function()
        return _.includes(12, $window.rankID);
      ,
      "SocialMedia": function()
        return _.includes(13, $window.rankID);
      
    );

    PermPermissionStore.definePermission('seeSettings', function (permission) 
      return true;
    );

    // update active tab on state change
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) 
      $rootScope.activeTab = toState.data.activeTab;
    );
  

  // manually bootstrap angular after the JWT token and decoded token is retrieved from the server
  $(function () 
    // get JWT token from server
    $.get('/app/token', function (token) 
      window.jwtToken = token;
    ).then(function(e)
      // get decoded token information
      $.get('/app/decode', function (user) 
        window.userID = user.id; // save id
        window.rankID = user.rank; // save rank
        angular.bootstrap(document, ['app']); // bootstrap app
      );
    );
  );
)();

<!DOCTYPE html>
<html>
<head>
  <title>Management -  activeTab </title>
  <script>document.write('<base href="' + document.location + '"/>')</script>

  <!-- META -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FAVICON -->
  <link rel="icon" href="/images/favicon.png">

  <!-- STYLE -->
  <link href="/css/style.css" rel="stylesheet" />
</head>
<body>

  <p>
    <h5 ng-repeat="page in pages">
      <a
        ng-class=" active: activeTab === page.name "
        ui-sref=" page.slug ">
        <span class="ion  page.icon " ng-if="page.icon"></span> page.name 
      </a>
    </h5>
  </p>

  <main role="main" ui-view></main>


<!-- Scripts
================================================== -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>

<!-- App
================================================== -->
<script src="app.js"></script>
<script src="settings/index.controller.js"></script>
<script src="dashboard/index.controller.js"></script>
<script src="management/index.controller.js"></script>
<script src="sheetcreator/index.controller.js"></script>

<!-- Services
================================================== -->
<script src="app-services/admin.service.js"></script>
<script src="app-services/forum.service.js"></script>
<script src="app-services/teamspeak.service.js"></script>
<script src="app-services/flash.service.js"></script>

<!-- Shared
================================================== -->
<script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/bower_components/angular-permission/dist/angular-permission.min.js"></script>
<script src="/bower_components/angular-permission/dist/angular-permission-ui.min.js"></script>
<script src="/bower_components/angular-ui-switch/angular-ui-switch.min.js"></script>
<script src="/bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="/bower_components/angular-smart-table/dist/smart-table.min.js"></script>
<script src="/bower_components/angular-xeditable/dist/js/xeditable.min.js"></script>
<script src="/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="/bower_components/angular-file-saver/dist/angular-file-saver.bundle.min.js"></script>
<script src="/bower_components/ng-lodash/build/ng-lodash.min.js"></script>
<script src="/bower_components/ngtweet/dist/ngtweet.min.js"></script>
<script src="/bower_components/angular-filter/dist/angular-filter.min.js"></script>

<script src="/bower_components/prism/prism.js"></script>
<script src="/bower_components/prism/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="/bower_components/prism/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>

<script src="app-directives/loading.directive.js"></script>
<script src="app-directives/prism.directive.js"></script>

<script src="app-provider/sidebar.provider.js"></script>

</body>
</html>

【问题讨论】：

想告诉我们this error 是什么？

@empiric 添加了它，抱歉。

【参考方案1】：

在您的 ng-repeat 中，您在 ui-sref 中使用了 page.slug，但在创建页面时在运行函数中 $stateProviderRef.state(page.name, stateObj); 你正在使用page.name。我假设page.slug 应该是正确的，因为你有来自ui-sref 的management 状态

将$stateProviderRef.state(page.name, stateObj); 更改为$stateProviderRef.state(page.slug, stateObj);