如何動態地嵌套指令

還在學習Angular，我正在使用路由。如何動態地嵌套指令

我的任務：我得到了一個示例項目，我得到了由多個站點共享的html結構。例如：有一個路由定義像

.state('start', { 
      url: '/start', 
      templateUrl: 'app/start/start.html', 
      controller: 'StartController', 
      controllerAs: 'start' 

     }) 
     .state('login', { 
      url: '/login', 
      templateUrl: 'app/start/start.html', 
      controller: 'StartController', 
      controllerAs: 'start', 
     }) 
     .state('logout', { 
      url: '/logout', 
      templateUrl: 'app/start/start.html', 
      controller: 'StartController', 
      controllerAs: 'start' 
     })

那些路由都使用相同的模板和控制器，這是因爲得到的物品角落找尋的內容的幀和僅在一個HTML標記，這也富人不同的功能不同。

模板（應用程序/啓動/的start.html）就是這樣：

<div layout="vertical" layout-fill> 

    <md-content layout="column" flex> 

    <div id="ContentHeader" layout="row"> 
     <div layout="column">1</div> 
     <div layout="column" flex>2</div> 
     <div layout="column">3</div> 
    </div> 

    <div id="ContentBody" layout="row" flex> 

     <dynamic-template></dynamic-template> 

    </div> 

    <div id="ContentFooter" layout="row">2</div> 

    </md-content> 

</div>

現在我想指令/內容動態切換爲

<dynamic-template></dynamic-template>

登錄/註銷和啓動路線使用不同的指令/控制器...

動態嵌套指令的最佳做法是什麼？

問候，n00n

來源

2017-05-20 n00n

我正確地認爲，_Dynamic Template_的目的是根據用戶觸發的內容顯示不同的內容，例如About Page或Contact Page？ – user2340824

你在哪裏存儲你的「登錄」狀態？只需將該狀態解析到您的指令中並使用軟件開關處理即可。 – lin

@ user2340824就是這樣，得到了2個模板，其中包含一個在路線上不同的div ......如何解決它？ – n00n

你將不得不使用Named Views

想法是在你的模板多個命名視圖。這些命名的視圖可以根據狀態進行不同的設置。

如果我們把你的例子，在這裏你需要做什麼：

模板：

<div layout="vertical" layout-fill> 

    <md-content layout="column" flex> 

    <div id="ContentHeader" layout="row"> 
     <div layout="column">1</div> 
     <div layout="column" flex>2</div> 
     <div layout="column">3</div> 
    </div> 

    <div id="ContentBody" layout="row" flex> 

     <div ui-view="dynamic"></div> 

    </div> 

    <div id="ContentFooter" layout="row">2</div> 

    </md-content> 

</div>

在這裏，我們增加了新的命名ui-view作爲dynamic。

路由器：

.state('start', { 
     url: '/start', 
     views:{ 
       "":{ 
        templateUrl: 'app/start/start.html', 
        controller: 'StartController', 
        controllerAs: 'start'}, 
       "dynamic":{ 
        templateUrl: 'app/start/myCustomStartView.html', 
        controller: 'StartController', 
        controllerAs: 'start'} 

     }) 
     .state('login', { 
      url: '/login', 
      views:{ 
       "":{ 
        templateUrl: 'app/start/start.html', 
        controller: 'StartController', 
        controllerAs: 'start'}, 
       "dynamic":{ 
        templateUrl: 'app/start/myCustomLoginView.html', 
        controller: 'StartController', 
        controllerAs: 'start'} 
     }) 
     .state('logout', { 
      url: '/logout', 
      views:{ 
       "":{ 
        templateUrl: 'app/start/start.html', 
        controller: 'StartController', 
        controllerAs: 'start'}, 
       "dynamic":{ 
        templateUrl: 'app/start/myCustomLogoutView.html', 
        controller: 'StartController', 
        controllerAs: 'start'} 
     })

在這裏，我們已經加入views定義每個狀態。視圖名稱決定了我們所瞄準的是哪個ui視圖。因此，以「dynamic」命名的視圖將以<div ui-view="dynamic"></div>爲目標。然後，我們可以通過更改模板來控制要在動態視圖中填充哪個模板。

來源

2017-05-26 07:18:10

如何動態地嵌套指令

回答

相關問題