12

私は angularJS の初心者であり、node/bower/grunt を使用して angularJS で単一ページ アプリの ui を開発しています。また、angular-ui-bootstrap と、angular-ui-utils からのルートおよびイベント ユーティリティをインストールしました。
メニュー項目で使用ng-class={active:$uiRoute}しましたが、メニュー項目が選択されたときにアクティブなクラスが適用されません...$uiRouteこれを処理しますか、それとも個別にコーディングする必要がありますか?

ばかげた質問をして申し訳ありません...
コードは次のとおりです。

`<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li ui-route="/" ng-class="{active:$uiRoute}"><a href="#/">Home</a></li>
    <li ui-route="/about" ng-class="{active:$uiRoute}"><a href="#/about">About</a></li>
    <li ui-route="/other" ng-class="{active:$uiRoute}"><a href="#/other">Other</a></li>
  </ul>
</div>
...
<script src="bower_components/angular-ui-utils/modules/route/route.js"></script>
<script src="bower_components/angular-ui-utils/modules/event/event.js"></script>`

と

angular.module('myApp', ['ngRoute','ngResource','ui.bootstrap'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrl'
  })
  .when('/other', {
    templateUrl: 'views/other.html',
    controller: 'OtherCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
})
4

3 に答える 3

0

名前付き状態で UI ルーターを使用することをお勧めします。

ルーターは次のようになります。

angular
  .module('myApp', ['ui.router'])
  .config(($stateProvider, urlRouterProvider) => {
    $stateProvider
      .state('index', {
        url: '/',
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
      })
      .state('index.about', {
        url: 'about/'
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      });
    $urlRouterProvider.otherwise('/');
  });

次のように、テンプレートで ui-sref-active ディレクティブを使用できます。

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li ui-sref-active="{ 'active': 'index' }">
      <a href="" ui-sref="index">Home</a>
    </li>
    <li ui-sref-active="{ 'active': 'index.about' }">
      <a href="" ui-sref="index.about">About</a>
    </li>
  </ul>
</div>
于 2017-05-18T09:15:30.073 に答える