在AngularJS中加载没有刷新父状态的子状态

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

检查此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' 
       }, 
      '[email protected]': { 
       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' 
       }, 
       '[email protected]': { 
       templateUrl: 'views/addRole.html', 
       controller: 'addRole' 
      } 
     } 
    }) 
    //Add role 
    .state('getUserInfoData',{ 
     url: '/getUserInfoData', 
     views: { 
      '': { 
        templateUrl: 'views/dashboard.html' , 
        controller : 'mainCtrl' 
       }, 
       '[email protected]': { 
       templateUrl: 'views/getUserInfoData.html', 
       controller: 'getUserInfoData' 
      } 
     } 
    }) 
    //manage role 
    .state('manageRole',{ 
     url: '/manageRole', 
     views: { 
      '': { 
        templateUrl: 'views/dashboard.html' , 
        controller : 'mainCtrl' 
       }, 
       '[email protected]': { 
       templateUrl: 'views/manageRole.html', 
       controller: 'manageRole' 
      } 
     } 
    }) 
    .state('manageUsers',{ 
     url: '/manageUsers', 
     views: { 
      '': { 
       templateUrl: 'views/dashboard.html', 
       controller : 'mainCtrl' 
      }, 
      '[email protected]': { 
       templateUrl: 'views/manageUsers.html', 
       controller: 'manageUsers' 
      } 
     } 
    }) 
    .state('sendSms',{ 
     url: '/sendSms', 
     views: { 
      '': { 
       templateUrl: 'views/dashboard.html', 
       controller : 'mainCtrl' 
      }, 
      '[email protected]': { 
       templateUrl: 'views/sendSms.html', 
       controller : 'smsController' 
      }    
     } 
    }) 
    //Manage Import/Export CSV 
    .state('manageCsv',{ 
     url: '/manageCsv', 
     views: { 
      '': { 
        templateUrl: 'views/dashboard.html' , 
        controller : 'mainCtrl' 
       }, 
       '[email protected]': { 
       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' 
       }, 
      '[email protected]': { 
       templateUrl:'views/createForm.html', 
       controller: 'createForm' 
      } 
     } 
    }) 
    //list claim profile 
    .state('claimProfile', { 
     url: '/claimProfile/:id', 
     views: { 
      '': { 
        templateUrl: 'views/dashboard.html' , 
        controller : 'mainCtrl' 
       }, 
      '[email protected]': { 
       templateUrl:'views/claimProfile.html', 
       controller: 'claimProfile' 
      } 
     } 
    }) 
    //list all forms 
    .state('manageForms', { 
     url: '/manageForms', 
     views: { 
      '': { 
        templateUrl: 'views/dashboard.html' , 
        controller : 'mainCtrl' 
       }, 
      '[email protected]': { 
       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>

来源

2017-01-31 gauravmehla

要做到这一点你的看法需要嵌套和父状态需要抽象。在这里你可以通过一些例子来看看。

.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是底部的一组标签）。

希望它有点有用

来源

2017-01-31 13:11:39 yBrodsky

Thankyou非常..它解决了我的问题，但是当我把'abstract：true，'它显示一个错误。无论如何，当我不把它，代码工作正常。 '：）'我不知道为什么，但它的工作..谢谢你@yBrodsky – gauravmehla

在AngularJS中加载没有刷新父状态的子状态

回答

相关问题