AngularJSで親状態を更新せずに子状態をロード

Question

Angular UI Routerを使用しています。ナビゲーションバーの任意のオプションをクリックすると、対応する状態が子ビューにロードされます。しかし、問題は、ナビゲーションバーのリスト項目のいずれかをクリックするたびに、親項目もロードされ、ナビゲーションバーがデフォルトにリセットされることです。 この問題を解決するには、このナビゲーションバーアイテムのいずれかをクリックするたびに、子ビューに対応する状態をロードしますが、親ビューをリセットすることはありません。

問題を理解するには、このgifを確認してください。

これはapp.js

// 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' 
      } 
     } 
    }); 

}); 

これはあなたの意見を入れ子にする必要があることを行うには

<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

私のHTMLで、親状態のニーズに私のconfigブロックであり、抽象的であること。ここでは、いくつかの光を通した例があります。

.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' 
     } 
    } 
    }) 

この例では、3つのレベルがあります。 js/components/stat/tabs.htmlがサイドメニューであり、js/components/stat/producto/tabs.htmlがテンプレートの下にタブのセットである場合でも、最初の状態と2番目の状態が抽象であることを確認してください）。

は、それは非常にありがとう