15

次の例に基づいたメニューがあります。

 <nav  data-ng-controller="menuContrl" class="menuItem">
     <a  data-ng-class='{active:isActive("/{{item.path}}")}' data-ng-repeat="item in menu" href="#/{{item.path}}">
         <span>{{item.title}}</span>
     </a>
 </nav>

item は、メニュー項目情報を含むオブジェクトです。ディレクティブとコントローラーの JavaScript コードは次のとおりです。

var app = angular.module("coolApp",[]);

function menuContrl($scope,$location){
    $scope.menu=menu;
    $scope.isActive = function(path){
        return ($location.path()==path)
    } 
}

問題は、ページのレンダリング中に 1 回だけにng-class設定classされることですが、メニュー項目をクリックしても何も起こりません。activeこれは、メニュー自体がリロードされておらず、内部のデータを変更しただけだからだと思います<div>。では、ページ全体をリロードせずに機能させるにはどうすればよいですか?

4

3 に答える 3

16

あなたが行けば、少し簡単であることがわかりました：

<li ng-repeat="i in mainMenu" ng-class="{'active':i.path == path}">

次に、コントローラーの $scope.path を変更するだけです。

于 2013-12-09T22:40:40.857 に答える
0 

//app.run
App.run(["$rootScope", "$state", "$stateParams",function ($rootScope, $state, $stateParams) {
        // Set reference to access them from any scope
        $rootScope.$route = $state;
}]);
        

// app.config
        $stateProvider
            .state('admin', {
                url: '/admin/',
                templateUrl: 'app/admin/admin.html',
                controller: 'AdminController',
            })
            .state('admin.dashboard', {
                url: 'dashboard',
                title: 'Dashboard',
                activetab: 'dashboard',
                controller: 'DashboardController',
                templateUrl: 'app/admin/dashboard.html',

            })
            .state('admin.view1', {
                url: 'view1',
                title: 'view1',
                activetab: 'view1',
                controller: 'view1Controller',
                templateUrl: 'app/admin/view1.html',
               
            })
            .state('admin.view2', {
                url: 'view2',
                title: 'view2',
                activetab: 'view2',
                controller: 'View2Controller',
                templateUrl: 'app/admin/view2.html',
            });
<li class="h4" ng-class="{'active': $route.current.activetab == 'dashboard'}">
                        <a>Dashboard</a>
                    </li>
                    <li class="h4" ng-class="{'active': $route.current.activetab == 'view1'}">
                        <a>view1</a>
                    </li>
                    <li class="h4" ng-class="{'active': $route.current.activetab == 'view2'}">
                        <a active-link="active">view2</a>
                    </li>

于 2017-10-12T05:54:17.380 に答える