ui.router'其他'似乎不起作用

我試圖讓ui.router使用以下設置。ui.router'其他'似乎不起作用

export class Router { 
    /* tslint:disable no-unused-variable */ 
    private static $inject: string[] = ["$stateProvider", "$urlRouterProvider", "$locationProvider"]; 
    /* tslint:enable no-unused-variable */ 

    constructor($state: ng.ui.IStateProvider, $urlRouter: ng.ui.IUrlRouterProvider, $location: ng.ILocationProvider) { 
     $urlRouter.otherwise("/"); 

     $state.state("default", { 
      url: "/", 
      views: { 
       "header": { 
        templateUrl: "/views/layout/header.html" 
       }, 
       "sidebar": { 
        templateUrl: "/views/layout/side-menu.html" 
       }, 
       "": { 
        templateUrl: "/views/workspace/index.html" 
       }, 
       "footer": { 
       }, 
      } 
     }); 

     $location.html5Mode(true); 
    } 
}

這是我使用的部分文件。

<div id="workspace"> 
    <div id="workspace-header"> 
     <div data-ui-view="header"></div> 
    </div> 
    <div id="workspace-container"> 
     <div> 
      <div data-ui-view="sidebar"></div> 
     </div> 
     <div> 
      <div> 
       <div> 
        <div id="workspace-view"> 
         <div data-ui-view></div> 
        </div> 
        <div id="workspace-footer"> 
         <div data-ui-view="footer"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

我不確定它是相關的（或者是否是一個問題），但上面的html是用ng-include注入的，就像這樣。

<div id="dashboard" data-ng-include="'/views/master.html'" data-prevent-touch-scroll></div>

只是要清楚我證實路由器被調用。

我以爲'否則'會導航到網址，它會轉變爲默認狀態，這將注入部分視圖，但它似乎並不工作，我敢肯定我失去了一些東西，但我不能想辦法。

來源

2014-10-13 Eyal Solnik

在這種情況下，搶劫者總是會有所幫助。它沒有HTML5的工作嗎？ –

我會舉例並更新它。 –

我試圖在Plunker中做這項工作，但它似乎爲我的style.css和app.js拋出404 .. –

我通過用ui-view替換ng-include來解決它。

<div id="dashboard" data-ui-view data-prevent-touch-scroll></div>

我的路由器看起來像這樣。

export class Router { 
    /* tslint:disable no-unused-variable */ 
    private static $inject: string[] = ["$stateProvider", "$urlRouterProvider", "$locationProvider"]; 
    /* tslint:enable no-unused-variable */ 

    constructor($state: ng.ui.IStateProvider, $urlRouter: ng.ui.IUrlRouterProvider, $location: ng.ILocationProvider) { 
     $urlRouter.otherwise("/"); 

     $state.state("default", { 
      url: "/", 
      templateUrl: "/views/master.html", 
      onEnter: ["$state", "$timeout", ($state: ng.ui.IStateService, $timeout: ng.ITimeoutService) => { 
       $timeout(() => { 
        $state.go("default.master"); 
       }); 
      }] 
     }); 

     $state.state("default.master", { 
      views: { 
       "header": { 
        templateUrl: "/views/layout/header.html" 
       }, 
       "sidebar": { 
        templateUrl: "/views/layout/side-menu.html" 
       }, 
       "": { 
        templateUrl: "/views/workspace/index.html" 
       }, 
       "footer": { 
       }, 
      } 
     }); 

     $location.html5Mode(true); 
    } 
}

我不確定它是解決方案還是黑客，但它的工作原理。 :)

來源

2014-10-13 09:17:47

ui.router'其他'似乎不起作用

回答

相關問題