無法通過UI路由器解析狀態

Question

我試圖在從數據庫中拉出頁面後使用ui路由器設置狀態，但每次嘗試單擊sref鏈接時都會出現此錯誤。這裏是app/app.js和app/index.html。你在ui-sref使用page.slug

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>

Answer 1

在您的NG-重複，但在運行函數創建你使用page.name在 $stateProviderRef.state(page.name, stateObj); 頁面時。我假設page.slug應該是正確的，因爲你必須從ui-sref

變化$stateProviderRef.state(page.name, stateObj);到$stateProviderRef.state(page.slug, stateObj);