angularjs - 用戶界面多個嵌套視圖

試圖找出多個嵌套視圖的概念，似乎並不明白我做錯了什麼。angularjs - 用戶界面多個嵌套視圖

app.js路由配置：

.config(function($stateProvider, $locationProvider, $urlRouterProvider) { 
    'ngInject'; 

    $stateProvider.state('home', { 
     url: '/', 
     templateUrl: 'tpls/views/welcome.html' 
    }) 
    .state('feeds', { 
     url: '/feeds', 
     views: { 
      'main': { 
       templateUrl: 'tpls/views/main.html' 
      }, 
      '[email protected]' : { 
       templateUrl: 'tpls/views/sidebar.html', 
       controller: 'MyCtrl', 
       controllerAs : 'main' 
      }, 
      '[email protected]': { 
       templateUrl: 'tpls/views/mainfeed.html', 
       controller: 'MyCtrl', 
       controllerAs : 'main' 
      } 
     } 
    }); 
    $urlRouterProvider.otherwise('/'); 
    $locationProvider.html5Mode(true); 
});

HTMLS：

上

index.html

我有一個空的指令 <div ui-view></div>

，這是main.html：

<div class="row"> 
    <div class="col-md-4 no-float sidebar"> 
     <div ui-view="sidebar"></div> 
    </div> 
    <div class="col-md-8 no-float"> 
     <div ui-view="mainfeed"></div> 
    </div> 
</div>

我的看法沒有渲染。當在/feeds我只看到背景。你能幫我發現問題嗎？通過github文檔，仍然無法推斷出解決方案。謝謝！

來源

2016-03-18 Saar Kuriel

你告訴一切螺母都沒有提到您的問題或錯誤？ –

你有一個錯誤的狀態定義它的側邊欄，因爲它應該是側邊欄 –

@CoderJohn我剛剛發現了它，但仍然感謝！ –

確保基頁index.html應該命名爲視圖main。

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

如果main命名視圖是不存在的話，你可以在你的基地的feedsview像下面有''。

代碼

.state('feeds', { 
    url: '/feeds', 
    views: { 
     //used blank to target unnamed `ui-view` placed on html 
     '': { 
      templateUrl: 'tpls/views/main.html' 
     }, 
     '[email protected]' : { 
      templateUrl: 'tpls/views/sidebar.html', 
      controller: 'MyCtrl', 
      controllerAs : 'main' 
     }, 
     '[email protected]': { 
      templateUrl: 'tpls/views/mainfeed.html', 
      controller: 'MyCtrl', 
      controllerAs : 'main' 
     } 
    } 
});

來源

2016-03-18 10:35:44

太簡單了。非常感謝！ –

@SaarKuriel很高興知道這一點。謝謝:-) –

這是語法看起來怎麼樣的嵌套意見。請與您的語法進行交叉檢查。
注意：這是一個第三方的，所以我們用ui.router.stateHelper

angular.module('myApp', ['ui.router', 'ui.router.stateHelper']) 
    .config(function(stateHelperProvider){ 
    stateHelperProvider.setNestedState({ 
     name: 'root', 
     templateUrl: 'root.html', 
     children: [ 
     { 
      name: 'contacts', 
      templateUrl: 'contacts.html', 
      children: [ 
      { 
       name: 'list', 
       templateUrl: 'contacts.list.html' 
      } 
      ] 
     }, 
     { 
      name: 'products', 
      templateUrl: 'products.html', 
      children: [ 
      { 
       name: 'list', 
       templateUrl: 'products.list.html' 
      } 
      ] 
     } 
     ] 
    }); 
    });

來源

2016-03-18 11:03:47

我已經提到過，我已經通過了，它並沒有幫助我。 –

這是一個嵌套狀態的例子，不是嵌套的視圖。 –

angularjs - 用戶界面多個嵌套視圖

回答

相關問題