Загружать дочерние состояния без обновления родительского состояния в AngularJS

Question

Я использую Angular UI Router, и когда я нажимаю на любую опцию в navbar, он загружает соответствующее состояние в дочерний режим. Но проблема в том, что всякий раз, когда я нажимаю на любой элемент списка в navbar, он также загружает родительский и перезагружает навигационную панель по умолчанию. Как решить эту проблему, всякий раз, когда я нажимаю на любой из этих элементов навигационной системы, он загружает соответствующее состояние в дочернее представление, но никогда не перезапускает родительский.

Проверьте этот gif чтобы узнать о проблеме.

Это мой config блок в 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' 
      } 
     } 
    }); 

}); 

Это мой 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 - это набор вкладок внизу).

Надежда это несколько полезно