在 AngularJS 中加载子状态而不刷新父状态

Question

我正在使用 Angular UI 路由器，当我单击导航栏中的任何选项时，它会将相应的状态加载到子视图中。但问题是，每当我单击导航栏中的任何列表项时，它也会加载父项并将导航栏重置为默认值。 如何解决此问题，每当我单击任何此导航栏项目时，它都会将相应的状态加载到子视图但从不重置父视图。

查看此 gif 以了解问题。

这是我在 app.js 中的 config 块

// Routes defined in config
app.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/dashboard');

$stateProvider

    // Home route
    .state('dashboard', {
        url: '/dashboard',
        views: {
            '': { 
                    templateUrl: 'views/dashboard.html' ,
                    controller : 'mainCtrl'
                },
            'columnOne@dashboard': { 
                templateUrl: 'views/home.html',
                controller: 'homeController'
            }
        }
    })
    //login route   
    .state('login',{
        url: '/login',
        templateUrl: 'views/login.html',
        controller: 'authController'
    })

    .state('logout',{
        controller:'logout'
    })

    //Add role
    .state('addRole',{
        url: '/addRole', 
        views: {
            '': {
                    templateUrl: 'views/dashboard.html' ,
                    controller : 'mainCtrl'
                },
                'columnOne@addRole': { 
                templateUrl: 'views/addRole.html',
                controller: 'addRole'
            }
        }
    })
    //Add role
    .state('getUserInfoData',{
        url: '/getUserInfoData', 
        views: {
            '': {
                    templateUrl: 'views/dashboard.html' ,
                    controller : 'mainCtrl'
                },
                'columnOne@getUserInfoData': { 
                templateUrl: 'views/getUserInfoData.html',
                controller: 'getUserInfoData'
            }
        }
    })
    //manage role
    .state('manageRole',{
        url: '/manageRole', 
        views: {
            '': {
                    templateUrl: 'views/dashboard.html' ,
                    controller : 'mainCtrl'
                },
                'columnOne@manageRole': { 
                templateUrl: 'views/manageRole.html',
                controller: 'manageRole'
            }
        }
    })
    .state('manageUsers',{
        url: '/manageUsers',
        views: {
            '': {
                templateUrl: 'views/dashboard.html',
                controller : 'mainCtrl'
            },
            'columnOne@manageUsers': {
                templateUrl: 'views/manageUsers.html',
                controller: 'manageUsers'
            }
        }
    })
    .state('sendSms',{
        url: '/sendSms',
        views: {
            '': {
                templateUrl: 'views/dashboard.html',
                controller :  'mainCtrl'
            },
            'columnOne@sendSms': {
                templateUrl: 'views/sendSms.html',
                controller : 'smsController'
            }            
        }
    }) 
    //Manage Import/Export CSV
    .state('manageCsv',{
        url: '/manageCsv',
        views: {
            '': {
                    templateUrl: 'views/dashboard.html' ,
                    controller : 'mainCtrl'
                },
                'columnOne@manageCsv': { 
                templateUrl: 'views/manageCsv.html',
                controller: 'manageCsv'
            }
        }
    }) 
    // Check user Route
    .state('checkUser', {
        url: '/',
        controller: 'checkController'
    })
    // List All Claim
    .state('createForm', {
        url: '/createForm',
        views: {
            '': { 
                    templateUrl: 'views/dashboard.html' ,
                    controller : 'mainCtrl'
                },
            'columnOne@createForm': { 
                templateUrl:'views/createForm.html',
                controller: 'createForm'
            }
        }
    })
     //list claim profile
    .state('claimProfile', {
        url: '/claimProfile/:id',
        views: {
            '': { 
                    templateUrl: 'views/dashboard.html' ,
                    controller : 'mainCtrl'
                },
            'columnOne@claimProfile': { 
                templateUrl:'views/claimProfile.html',
                controller: 'claimProfile'
            }
        }
    })
    //list all forms
    .state('manageForms', {
        url: '/manageForms',
        views: {
            '': { 
                    templateUrl: 'views/dashboard.html' ,
                    controller : 'mainCtrl'
                },
            'columnOne@manageForms': { 
                templateUrl:'views/manageForms.html',
                controller: 'manageForms'
            }
        }
    });

});

这是我的 HTML

<div class="left-sidebar-section">
    <div class="section-title">Claims</div>
    <ul class="list-unstyled" id="form-components">
        <li ui-sref="getUserInfoData">
            <button class="btn btn-flat" data-parent="#form-components" ng-class="{activeMenu : isActive('/getUserInfoData')}">
                <span class="btn-title">
                    <a>Users Data</a>
                </span>
                <i class="material-icons pull-left icon">folder</i>
            </button>
        </li>
    </ul>
</div>

Answer 1

为此，您的视图需要嵌套，并且父状态需要是抽象的。这里有一个示例，可能会有所启发。

  .state('estadisticas', {
    url: '/estadisticas',
    abstract: true,
    templateUrl: 'js/components/stat/tabs.html'
  })

  .state('estadisticas.producto', {
    url: '/producto',
    abstract: true,
    views: {
      'menuContent': {
        templateUrl: 'js/components/stat/producto/tabs.html'
      }
    }

  })

  .state('estadisticas.producto.general', {
    url: '/general',
    views: {
      'tab-producto-general': {
        templateUrl: 'js/components/stat/producto/general.html',
        controller: 'StatsProductoCtrl'
      }
    }
  })

在此示例中，共有三个级别。检查第一个和第二个状态是否是抽象的，即使它们有自己的模板（js/components/stat/tabs.html 是侧面菜单，js/components/stat/producto/tabs.html 是底部的一组选项卡)。

希望对你有用