Question

我需要在控制器页面内动态添加类名，当状态将使用angular js更改时。我做了一些编码，但它只在页面刷新后才起作用。我正在解释下面的代码。

dashboard.html：

<div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class={{home_active}} ><a ui-sref="dashboard">Home</a></li>
            <li class={{profile_active}} ><a ui-sref=".profile" >Profile</a></li>
            <li class={{dept_active}}><a ui-sref=".dept">Department</a></li>
            <li class={{pricipal_active}}><a ui-sref=".princpal">Princpal</a></li>
            <li class={{hod_active}}><a ui-sref=".dept_head">Dept. Head</a></li>
          </ul>
          </div><!--/.nav-collapse -->
      </div>
    </nav>

<!--main_heading_div-->
        <!--middle_content_details_data-->
        <div class="row" style="padding-top:120px;"  ui-view>

        </div>

loginRoute.js：

var Admin=angular.module('Channabasavashwara',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
     .state('/', {
            url: '/',
            templateUrl: 'dashboardview/login.html',
            controller: 'loginController'
        })
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'dashboardview/dashboard.html',
            controller: 'dashboardController'
        })
        .state('dashboard.profile', {
        url: '/profile',
        templateUrl: 'dashboardview/profile.html',
        controller: 'profileController'
    })
    .state('dashboard.dept', {
        url: '/dept',
        templateUrl: 'dashboardview/dept.html',
        controller: 'deptController'
    })
    .state('dashboard.princpal', {
        url: '/princpal',
        templateUrl: 'dashboardview/princpal.html',
        controller: 'princpalController'
    })
    .state('dashboard.dept_head', {
        url: '/dept_head',
        templateUrl: 'dashboardview/depthead.html',
        controller: 'deptheadController'
    })
    .state('home',{
        url: '/home',
        templateUrl: 'homeview/home.html',
        controller: 'homeController'
    })
    .state('home.course', {
        url: '/course',
        templateUrl: 'homeview/course.html',
        controller: 'coursecontroller'
    })
    .state('home.subject', {
        url: '/subject',
        templateUrl: 'homeview/subject.html',
        controller: 'subjectcontroller'
    })

dashboardController.js：

var dashboard=angular.module('Channabasavashwara');
dashboard.controller('dashboardController',function($scope,$http,$state){
    //$state.current='';
    if($state.current.url=="/dashboard"){
        $scope.profile_active="";
        $scope.home_active="active";
        $scope.dept_active="";
        $scope.pricipal_active="";
        $scope.hod_active="";
    }
    else if($state.current.url=="/profile"){
        $scope.profile_active="active";
        $scope.home_active="";
        $scope.dept_active="";
        $scope.pricipal_active="";
        $scope.hod_active="";
    }
    else if($state.current.url=="/dept"){
        $scope.profile_active="";
        $scope.home_active="";
        $scope.dept_active="active";
        $scope.pricipal_active="";
        $scope.hod_active="";
    }
    else if($state.current.url=="/princpal"){
        $scope.profile_active="";
        $scope.home_active="";
        $scope.dept_active="";
        $scope.pricipal_active="active";
        $scope.hod_active="";
    }
    else{
        $scope.profile_active="";
        $scope.home_active="";
        $scope.dept_active="";
        $scope.pricipal_active="";
        $scope.hod_active="active";
    }
})

这里我得到了类名，但只是在页面重新加载之后。我需要用户根据该类名称将添加的状态更改状态。请帮助我。

Answer 1

您似乎正在使用angular-ui-router。他们有一个名为ui-sref-active的内置指令。如果相关的ui-sref处于活动状态，它会向元素添加一个类。

在您的情况下，您不需要dashboardController.js中的所有代码。只需更改您的dashboard.html并将ui-sref-active指令添加到li元素：

dashboard.html：

<ul class="nav navbar-nav">
  <li ui-sref-active="active" ><a ui-sref="dashboard">Home</a></li>
  <li ui-sref-active="active" ><a ui-sref=".profile" >Profile</a></li>
  <li ui-sref-active="active"><a ui-sref=".dept">Department</a></li>
  <li ui-sref-active="active"><a ui-sref=".princpal">Princpal</a></li>
  <li ui-sref-active="active"><a ui-sref=".dept_head">Dept. Head</a></li>
</ul>

使用angular.js

1 个答案: