Question

我在从数据库中提取页面后尝试使用ui路由器设置状态，但每次我尝试点击sref-link时都会出现此错误。这是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

＆＃13;

(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
      });
    });
  });
})();

＆＃13;

<!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>

＆＃13;

Answer 1

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

的状态为ui-sref

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

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

1 个答案: