2014-02-13 57 views
1
   Hi all, 

環境:vs 2013 express for web,熱毛巾角1.2,Breeze.WebApi2,sql server 2012 express。熱毛巾角1.2,玩菜單

我希望能夠添加或刪除我的網絡應用程序菜單中的項目,是否有可能?

我見過其中的菜單是建立並返回由getRoutes()的config.route.js:

function getRoutes() { 

    var rts = [ 
     { 
      url: '/', 
      config: { 
       templateUrl: 'app/dashboard/dashboard.html', 
       title: 'dashboard', 
       settings: { 
        nav: 2, 
        content: '<i class="fa fa-dashboard"></i> Dashboard' 
       } 
      } 
     }, 
     { 
      url: '/admin', 
      config: { 
       title: 'admin', 
       templateUrl: 'app/admin/admin.html', 
       settings: { 
        nav: 6, 
        content: "<i class='fa fa-dashboard'></i> GUIGUI's Homepage" 
       } 
      } 
     }, { 
      url: '/register', 
      config: { 
       title: 'register', 
       templateUrl: 'app/register/register.html', 
       settings: { 
        nav: 4, 
        content: '<i class="fa fa-lock"></i> Register' 
       }, 
       visible: false 
      } 
     }, { 
      url: '/login', 
      config: { 
       title: 'login', 
       templateUrl: 'app/login/login.html', 
       settings: { 
        nav: 5, 
        content: '<i class="fa fa-lock"></i> Login' 
       } 
      } 
     }, { 
      url: '/', 
      config: { 
       title: 'Client', 
       templateUrl: 'app/client/client.html', 
       settings: { 
        nav: 1, 
        content: '<i class="fa fa-dashboard"></i> client' 
       } 
      } 
     }, { 
      url: '/mission', 
      config: { 
       title: 'Mission', 
       templateUrl: 'app/mission/mission.html', 
       settings: { 
        nav: 7, 
        content: '<i class="fa fa-lock"></i> mission' 
       } 
      } 
     } 
     , { 
      url: '/uploadFile', 
      config: { 
       title: 'uploadFile', 
       templateUrl: 'app/uploadFile/uploadFile.html', 
       settings: { 
        nav: 8, 
        content: '<i class="fa fa-lock"></i> uploadFile' 
       } 
      } 
     } 
    ]; 

    return rts; 
} 

(應用程序與客戶開始)。

我創建了一個認證服務來知道當前用戶(如果有一個登錄)。

我的問題是:在哪裏更新菜單更明智?

我認爲config.route.js在啓動時加載一次。

我的目的是根據用戶是否登錄或不登陸項目添加或刪除項目,可能嗎?

在哪裏注入authenticationService來更新菜單?

回答

1

我找到了一個解決方案,相當簡單。

而不是從菜單中添加或刪除項目的(路線,這是我認爲是不可能的),這是簡單的對自己的知名度玩,你可以將屬性的菜單項(可見,指數增加, ......,任何你想要的),比如,你可以做到這一點(它是config.route.js):

 var persistantRoutes = [ 
      { 
       url: '/await', 
       config: { 
        title: '', 
        templateUrl: 'app/await/await.html', 
        settings: { 
         nav: 1, 
         content: "", 
         index: 0, 
         visible: false 
        } 
       } 
      }, { 
       url: '/reinit', 
       config: { 
        title: '', 
        templateUrl: 'app/reinit/reinit.html', 
        settings: { 
         nav: 2, 
         content: "", 
         index: 0, 
         visible: false 
        } 
       } 
      }, { 
    ... 

routes = persistantRoutes; 

在菜單中的視圖模型(在我的情況:sidebar.js),你可以這樣做:

function activate() { 
    authenticationService.checkAuthentication().then(getNavRoutes); 
} 

function getNavRoutes() { 
    vm.navRoutes = routes.filter(function (r) { 

     if (authenticationService.currentUser.isAuthenticated) { 
      switch (r.config.title) { 
       case "login": 
       case "register": 
        r.config.settings.visible = false; 
        break; 
       case "userHomePage": 
        r.url = "/"; 
        r.config.settings.visible = true; 
        r.config.settings.nav = 3; 
        break; 
       case "FGHomePage": 
        r.url = "/FGHomePage"; 
        r.config.settings.nav = 4; 
        break; 
      } 
     } 
     else { 
      switch (r.config.title) { 
       case "login": 
       case "register": 
        r.config.settings.visible = true; 
        break; 
       case "userHomePage": 
        r.url = "/userHomePage"; 
        r.config.settings.visible = false; 
        r.config.settings.nav = 4; 
        break; 
       case "FGHomePage": 
        r.url = "/"; 
        r.config.settings.nav = 3; 
        break; 
      } 
     } 

     if (r.config.settings.visible == true) { 
      return r.config.settings && r.config.settings.nav; 
     } 
    }).sort(function (r1, r2) { 
     return r1.config.settings.nav - r2.config.settings.nav; 
    }); 
} 

我已經做了一項服務:的AuthenticationService,允許你知道,如果當前用戶進行身份驗證,知道了這個就可以呈現不菜單中的項目。

這是我認爲很簡單。

問候。

+0

如果有兩組菜單,你將如何解決這個問題。一個在側邊欄,一個在topnavbar。側欄菜單取決於topnavbar選擇的菜單。比方說,頂層菜單說,客戶,供應商,訂單等,側欄根據導航欄選擇的菜單應顯示創建客戶,列表客戶在topnavbar上選擇客戶 –

0
{ 
     url: '/login', 
     config: { 
      title: 'login', 
      templateUrl: 'app/login/login.html', 
      settings: { 
      } 
     } 
    } 

如果您從設置中刪除導航(您也可以刪除內容),則問題已修復。

相關問題