Angularjs 角度UI路由器：嵌套视图

我有两个列布局与页眉和页脚。标题已启动页面导航，组件。在两列中，一列用于sidenav，另一列用于主要内容。 当GetStarted nav处于活动状态时，sidenav将填充相应的链接概述，示例 当组件导航处于活动状态时，sidenav将填充相应的链接复选框“警报”

单击“概述”后，链接区域将填充其数据

 <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#checkbox--default">Default</a></li>
      <li role="presentation"><a href="#checkbox--disabled">Disabled</a></li>
    </ul>

    <section class="content__main__tab__content col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <form id="checkbox--default">
        <div class="input__checkbox--default" id="checkbox--default">
        <!-- <div class="form-group"> -->
          <fieldset>
            <legend>Default</legend>
                <label for="gi-checkbox">Checkbox Label
                <div class="checkbox-input-wrapper group__input-wrapper">
                  <input type="checkbox" class="checkbox" id="gi-checkbox">
                </div>
                </label>
          </fieldset>             
        <!-- </div> -->
      </div> 
      </form>
</section>

service.js

---

你的问题有点混乱，但玩了一会儿我就明白了我做了这把小提琴：我希望它能像你期望的那样工作

这里要关注的主要问题是：

.state("root.components.button", {
    url: '/components/button',
    views: {
        'main@': {
            template: `
                <div>
                    <a ui-sref="root.components.button.default">default</a>
                    <a ui-sref="root.components.button.disabled">disabled</a>
                    <div ui-view="buttonsContent"></div>
                </div>
            `
        }
    }
})
.state("root.components.button.default", {
    url: '/components/button/default',
    views: {
        'buttonsContent@root.components.button': {
            template: 'root.components.button.default'
        }
    }
})
.state("root.components.button.disabled", {
    url: '/components/button/disabled',
    views: {
        'buttonsContent@root.components.button': {
            template: 'root.components.button.disabled'
        }
    }
})

在第一层，你有一个抽象的路线，这样你就可以始终有你的基本布局

然后在启动/组件路由中，将内容加载到主ui视图和侧ui视图中

在所有已启动和零部件子管线中，您只需覆盖主视图

---

最后，在最后一个级别中，您需要说您想要填充在前一个状态中创建的ui视图的内容，方法如下VIEWNAME@STATENAME.

问题是什么？请清理一下，这是一个完全混乱的地方，真的很难帮助你。谢谢你花时间来帮助我。上面我发布的代码也有点类似。但是在填充主界面和侧界面视图时，我被卡住了，现在用户将单击来自sidenav的链接。例如说checkbox。现在，主ui视图及其内容已流行。此内容具有导航选项卡，如堆叠、禁用、，。。默认情况下，第一个选项卡内容应显示在选项卡下方的视图中。单击“禁用”后，uiview将更改其内容。附加屏幕更新了答案，我认为它可能符合您现在的需要

    <div class="content__wrapper">
        <div class="row">
          <div class="content__secondary content__secondary--l scrollspy">
              <ul id="sidenav-fixed-l" class="nav hidden-xs hidden-sm affix-top" data-spy="affix">
                <li>
                    <h5>COMPONENTS</h5>
                </li>
                <li ng-repeat="item in componentsList">
                    <a ui-sref="{{item.link}}" ng-cloak>{{item.name}}</a> 
                </li>
              </ul>
          </div>
          <div ui-view></div>      
        </div> <!--/.row-->
      </div> <!--/.content-wraper-->  

(function(){
    var mendouiApp = angular.module('mendouiApp', ['ui.router', 'ui.router.stateHelper']);

    mendouiApp.constant('COMPONENTS_LIST', {
        name: 'sidenav',
        templateUrl: '../components/components.list.html',
        abstract: true,
        children: [{
            name: 'alerts',
            url: '/alerts',
            templateUrl: '../components/alerts/alerts.html'
        }]
    });

    mendouiApp.config(function($stateHelperProvider, $urlRouterProvider, $locationProvider, $urlMatcherFactoryProvider, COMPONENTS_LIST) {
        $urlMatcherFactoryProvider.strictMode(false);
        $urlRouterProvider.otherwise('/home');
        $locationProvider.hashPrefix('!');
        $stateHelperProvider
            .state('home', {
                url: '/home',
                templateUrl: '../gettingstarted.html',
                controller: 'getStartedController'
            })
            .state('layouts', {
                url: '/layouts',
                templateUrl: '../layouts.html'
            })
            .state('screenpatterns', {
                url: '/screenpatterns',
                templateUrl: '../screenpatterns.html'
            })
            .state('yogi', {
                url: '/yogi',
                templateUrl: '../yogi.html'
            })
            .state('components', {
                url: '/components', 
                templateUrl: '../components.html',
                controller: 'componentsController'
            })
            .state(COMPONENTS_LIST, {
                keepOriginalNames: true
            })
            .state('components.button', {
                url: '/button',
                templateUrl: '../components/button/button.html'
            })          .state('components.checkbox', {
                url: '/checkbox',
                templateUrl: '../components/checkbox/checkbox.html'
            })
            .state('components.forms', {
                url: '/forms',
                deepStateRedirect: true,
                sticky: true,
                views: {
                    '': { templateUrl: '..forms.html' },
                    'inline@components.forms': {
                        templateUrl: '../components/forms/form-inline/forminline.html'
                    },
                    'default@components.forms': {
                        templateUrl: '../components/forms/form-default/formdefault.html'
                    },
                    'multicolumn@components.forms': {
                        templateUrl: '../components/forms/form-multicolumn/formmulticolumn.html'
                    }
                }           
            });
            // use the HTML5 History API
            $locationProvider.html5Mode({
              enabled: true,
              requireBase: false
            });
    });

    mendouiApp.controller('componentsController', ['$scope', '$state', 'sideNavService', function($scope, $state, sideNavService, COMPONENTS_LIST){
        $scope.componentsList = sideNavService.components;
        $scope.componentsnav = COMPONENTS_LIST.children;
        $scope.go = function(tab) {
            $state.go(tab.name);
        }
    }]);
    mendouiApp.controller('getStartedController', ['$scope', '$state', 'sideNavService', 'fixedSideNavService', function($scope, $state, sideNavService, fixedSideNavService ){
        $scope.getstartedList = sideNavService.getstarted;
    }]);

    /*** This is for the external url reference ***/
    mendouiApp.run(function($rootScope, $state, $stateParams, $window, fixedSideNavService, copyToClipBoardService) {
        $rootScope.$on('$stateChangeStart',
            function(event, toState, toParams, fromState, fromParams, $state, $stateParams) {
                if (toState.external) {
                    event.preventDefault();
                    $window.open(toState.url, '_self');
                }
        });
        $rootScope.$on('$viewContentLoaded', function(event){
            fixedSideNavService.fixedsidenav();
            copyToClipBoardService.copytoclipboard();
        });

        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $state.transitionTo('home');
    });
    })();

angular.module('mendouiApp').service('sideNavService', function() {
  return {
    "getstarted" : [
        {
            "name" : "Overview",
            "link" : "home.overview"
        }
        {
            "name" : "Summary",
            "link" : "home.overview"
        }

    ],
    "components" : [
        {
            "name" : "Alerts",
            "link"  :"components.alert"
        },
        {
            "name" : "Button",
            "link"  :"components.button"
        },
        {
            "name" : "Button Groups",
            "link"  :"components.buttongroup"
        },
        {
            "name" : "Button Icons",
            "link"  :"components.buttonicons"
        },
        {
            "name" : "Checkbox",
            "link"  :"components.checkbox"
        },
        {
            "name" : "Datepicker",
            "link"  :"components.datepicker"
        },
        {
            "name" : "Forms",
            "link" : "components.forms"
        }

    ]
 };
});

.state("root.components.button", {
    url: '/components/button',
    views: {
        'main@': {
            template: `
                <div>
                    <a ui-sref="root.components.button.default">default</a>
                    <a ui-sref="root.components.button.disabled">disabled</a>
                    <div ui-view="buttonsContent"></div>
                </div>
            `
        }
    }
})
.state("root.components.button.default", {
    url: '/components/button/default',
    views: {
        'buttonsContent@root.components.button': {
            template: 'root.components.button.default'
        }
    }
})
.state("root.components.button.disabled", {
    url: '/components/button/disabled',
    views: {
        'buttonsContent@root.components.button': {
            template: 'root.components.button.disabled'
        }
    }
})