0

プロジェクトを開発してAngularjsとNodejsを学んでいます。このチュートリアルに従って、フォルダー構造とルート構成を整理しました。

問題: タブのクリックに基づいて ng-class を更新する isActive というメソッドを追加しました。しかし、タブをクリックすると、isActive メソッドが呼び出されません。

私の推測では、appRoutes.js で何か問題が発生しましたが、これを修正する方法がわかりません。MainController には到達できますが、その中のメソッドには到達できません。

別の質問があります。アプリケーションに入るとき、またはホーム タブをクリックしたとき、またはアプリケーション ヘッダーもクリックしたときに、ホーム タブをアクティブにする必要があります。

以下はhtmlとjsコードです。

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <base href="/">
        <title>ets</title>
        <link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/ets.css">
    </head>

    <body ng-app="etsApp">
        <div id="mainDiv">
            <div>
                <section id="header_section" class="main-title"></section>
                <section id="nav_section"></section>
            </div>
            <section id="body_section">
                <div ng-view="ng-view"></div>
            </section>
            <section id="footer_section" class="footer-style"></section>
        </div>

        <script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>       
        <script type="text/javascript" src="libs/angular/angular.min.js"></script>
        <script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
        <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
        <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
        <script type="text/javascript" src="js/appRoutes.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#header_section').load('views/partials/header.html');
                $('#nav_section').load('views/partials/navigation_main.html');
                $('#footer_section').load('views/partials/footer.html');    
            });
        </script>
    </body>
</html>

navigation_main.html

<div>
  <nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav">

      <li ng-class="{active : isActive('/home')}" id="nav_home">
        <a href="/home">Home</a>
      </li>

      <li ng-class="{active : isActive('/expensereporting')}" id="nav_exprep">
        <a href="/expensereporting">Expense Reporting</a>
      </li>

      <li ng-class="{active : isActive('/remainders')}">
        <a href="/remainders" id="nav_remain">Todo Remainder's</a>
      </li>

      <li ng-class="{active : isActive('/pdfoperations')}">
        <a href="/pdfoperations" id="nav_pdf">PDF Operation's</a>
      </li>

      <li ng-class="{active : isActive('/imageoperations')}">
        <a href="/imageoperations" id="nav_img">Image Operation's</a>
      </li>

    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#" style="margin-right: 20px; color: white;">Login/Register</a></li>
    </ul>
  </nav>
</div>

header.html

<div>
  <header id="header" style="margin-left: 50px;">
      <a href="/" style="text-decoration: none; color: black;">
        <strong>eTools Store</strong>
      </a> 
  </header>
</div>

appRoutes.js

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider

        .when('/', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'
        })

        .when('/home', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'    
        });

        $locationProvider.html5Mode(true);
}]);

app.js

    angular.module('etsApp', ['ngRoute', 'appRoutes', 'HomeCtrl', 'MainCtrl']);

MainCtrl.js

angular.module('MainCtrl', []).controller('MainController', function($scope) {
        console.log('Main Controller');

        $scope.isActive = function(destination) {
            console.log($location.path());
            return destination === $location.path();
        }

    });
4

5 に答える 5

1

isActive メソッドに到達しない問題について:
整理してみてください:

    <script type="text/javascript" src="js/controllers/MainCtrl.js">         </script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

の中へ：

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>



于 2015-11-06T07:18:02.420 に答える
1

.otherwise を追加するのを忘れている可能性があります

        .when('/', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'
        })

        .when('/home', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'    
        })
        .otherwise({
                redirectTo: '/'
            });

更新：これを試してください-navigation_main.htmlで

 <li ng-class="{'active' : path}" >
    <a href="/imageoperations" id="nav_img" ng-click="itemClicked('/imageoperations')">Image Operation's</a>
  </li>

MainCtrl.js

angular.module('MainCtrl', []).controller('MainController', function($scope) {
        console.log('Main Controller');

        $scope.itemClicked= function(destination) {
                      $scope.path = destination;
        }

    });
于 2015-11-06T07:32:08.623 に答える
0

ルーティングと、状態がアクティブなときにアクティブなクラスを追加するために、angular ui-router を試すことができます。ui-sref-active="YourActiveClassHere" を追加するだけです。Angular UI ルーター

この順番を変えてみて、

    <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

これに、

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
于 2015-11-06T07:20:26.020 に答える
0

タグに ng-click=isActive('/home') を追加してみてください。

<li ng-class="{active : activeClass == 'home'}" id="nav_home">
    <a href="/home" ng-click=isActive('/home')>Home</a>
</li>

MainCtrl に次の行を追加します。

$scope.activeClass = '';
$scope.isActive = function(destination) {
    $scope.activeClass = destination;
}
于 2015-11-06T07:58:29.330 に答える