Angular ui.router動態側欄

Question

我現在已經嘗試了一整天，我不知道該如何解決這個問題。 我的目標是顯示側邊欄，該側邊欄根據其狀態填充數據。

可以說我在主頁上，我可能喜歡以下物品：

1. 家居用品1
2. 家居用品2

如果我在“ 關於”頁面上，則需要以下項目：

1. 關於我
2. 關於我的狗

我希望從服務中獲取數據，該服務根據其狀態將數據返回到視圖。

我試圖使用ui.router的resolve函數，但是我無法在腦海中獲取正確的結構來使其正常工作。

創建了一個顯示我的意思但沒有解決方案的插件，使用Angular和ui.router創建動態邊欄時的最佳實踐和首選方法是什么？

myapp.config(function($stateProvider) {
      $stateProvider
        .state('home', {
          url: "",
          views: {
            "content": {
              template: "This is the home.content"
            },
            "sidebar": {
              templateUrl: 'sidebar.html',
              controller: 'sidebarCtrl'
            }
          }
        })
        .state('about', {
          url: "/about",
          views: {
            "content": {
              template: "This is the about.content"
            },
            "sidebar": {
              templateUrl: 'sidebar.html',
              controller: 'sidebarCtrl'
            }
          }
        })
    })

普倫克在這里

編輯

無法弄清楚我在做什么錯，此代碼未顯示任何視圖：

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    // For any unmatched url, redirect to root
    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state('root', {
            url: '',
            'abstract': true,
            views: {
                'sidebar@': {
                    templateUrl: '/App/Main/views/shared/sidebars/sidebar.cshtml',
                    controller: 'app.controllers.views.shared.sidebars.sidebar',
                    resolve: {
                        sidebarData: function (sidebarService) {
                            return sidebarService.getActions();
                        }
                    }
                }
            },
        })
    .state('root.home', {
        url: "/",
        views: {
            '': {
                templateUrl: '/App/Main/views/home/home.cshtml',
                controller: 'app.controllers.views.home'
            },
            'content@root.home': {
                templateUrl: '/App/Main/views/home/home-content.cshtml',
                controller: 'app.controllers.views.home'
            }
        }
    })
    .state('root.about', {
        url: "/customers",
        views: {
            '': {
                templateUrl: '/App/Main/views/customers/customers.cshtml',
                controller: 'app.controllers.views.customers'
            },
            'content@root.about': {
                templateUrl: '/App/Main/views/customers/customers-content.cshtml',
                controller: 'app.controllers.views.customers'
            }
        }
    });
}]);

這是我的房屋和客戶視圖的樣子：

<div data-ui-view="sidebar">
    Loading sidebar view.
</div>
<div data-ui-view="content">
    Loading content view.
</div>

Answer 1

您可以嘗試為邊欄實現named和抽象視圖以在其他路由中重用它，也可以使用resolve參數返回所需的任何動態數據（來自服務，資源等），它可能是某種東西像這樣：

var myapp = angular.module('myapp', ["ui.router"])
     myapp.config(function($stateProvider) {
      $stateProvider
      .state('root',{
          url: '',
          abstract: true,
          views: {
            'sidebar@': {
              templateUrl: 'sidebar.html',
              controller: 'sidebarCtrl',
              resolve:{
                sidebarData:function(){
                  return  [{
                         state: '/stateHere',
                         text: 'Need'
                         }, {
                        state: '/stateHere',
                        text: 'to'
                        }, {
                        state: '/stateHere',
                        text: 'fill'
                        }, {
                        state: '/stateHere',
                        text: 'this'
                         }, {
                        state: '/stateHere',
                        text: 'with'
                        }, {
                        state: '/stateHere',
                        text: 'dynamic'
                        }, {
                        state: '/stateHere',
                       text: 'data'
                       }];
                }
              }
            }
        })
        .state('root.home', {
          url: "/",
          views: {
            'content@': {
              template: "This is the home.content"
            }
          }
        })
        .state('root.about', {
          url: "/about",
          views: {
            'content@': {
              template: "This is the about.content"
            }
          }
        })
    });

     myapp.controller('sidebarCtrl', ['$scope','sidebarData'
      function($scope,sidebarData) {
            $scope.sidebarData= sidebarData,

      }
    ]);

編輯：

檢查此工作示例： http : //plnkr.co/edit/Nqwlkq1vGh5VTBid4sMv?p=preview