Angular ui.router动态侧边栏

时间:2014-09-05 21:00:22

标签: javascript angularjs angular-ui-router

我现在已经尝试了一整天,我无法弄清楚我将如何解决这个问题。 我的目标是显示一个侧边栏,根据它的状态来填充数据。

让我们说我在主页我可能会喜欢这个项目:

  1. 首页1
  2. Home item 2
  3. 如果我在关于页面,我想要这些项目:

    1. 关于我
    2. 关于我的狗
    3. 我希望从一个服务中获取数据,该服务根据状态将数据返回到视图。

      我曾尝试使用ui.router的解析功能但我无法在脑中得到正确的结构以使其正常工作。

      创建了一个显示我的意思但没有解决方案的plunkr,在使用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'
                  }
                }
              })
          })
      

      Plunkr here

      修改

      无法弄清楚我做错了什么,这段代码没有显示任何视图:

      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>
      

1 个答案:

答案 0 :(得分:2)

你可以尝试为你的侧边栏实现命名和抽象视图,以便在你的其他路由中重用它,你也可以使用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