在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是底部的一組標籤）。

希望它有點有用