7

私は次の構成を持っています：

$routeProvider
.when('/cars', { templateUrl: 'app/cars/index.html', controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { templateUrl: 'app/bikes/index.html', controller: 'BikesCtrl', reloadOnSearch: false });

そして私のルート index.html のどこかに次のものがあります:

<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-view></div>

ここで、両方のビューを同時に DOM にロードして生成し、ルート/URL に応じていずれかを表示します。

次のようなものです（実際の作業コードではなく、アイデアを提供するためだけです）。

app.js:

$routeProvider
.when('/cars', { controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { controller: 'BikesCtrl', reloadOnSearch: false });

ルート index.html:

<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-include="'app/cars/index.html'" ng-show="carsVisible"></div>
<div ng-include="'app/bikes/index.html'" ng-show="bikesVisible"></div>

更新: ng-view の種類がこれを行うことは知っていますが、微妙な場合でも違いが存在します。各ビューの html が一度生成され、常に DOM にとどまるようにします。

4

4 に答える 4

9

ng-include を介してすべてのビューをロードする単一の RouteCtrl を作成しました。ng-view は使用されません。テンプレートをインライン化しました。テンプレートには、特定のコントローラーを取り込むための独自の ng-controller ディレクティブを含めることができます。

<body ng-controller="RouteCtrl">
  <a href="#/cars">Cars</a>
  <a href="#/bikes">Bikes</a>
  <div ng-controller="RouteCtrl">
      <div ng-include="'/cars.html'"  ng-show="carsVisible"></div>
      <div ng-include="'/bikes.html'" ng-show="bikesVisible"></div>
  </div>

  <script type="text/ng-template" id="/cars.html">
     Cars template.
  </script> 
  <script type="text/ng-template" id="/bikes.html">
     Bikes template.
  </script>

$routeProvider は引き続き構成されますが、テンプレートまたはコントローラーが指定されていないため、RouteCtrl が常にアクティブになります。そのコントローラーは$routeChangeSuccessイベントをリッスンし、それに応じて ng-show プロパティを操作します。

app.config(function($routeProvider) {
  $routeProvider
     .when('/cars', {} )
     .when('/bikes', {})
});

app.controller('RouteCtrl', function($scope, $route, $location) {
  $scope.$on('$routeChangeSuccess', function() {
    var path = $location.path();
    console.log(path);
    $scope.carsVisible = false;
    $scope.bikesVisible = false;
    if(path === '/cars') {
       $scope.carsVisible = true;
    } else if(path === '/bikes') {
       $scope.bikesVisible = true;
    }
  });
});

プランカー

このソリューションのアイデアは@Andyからのものです。

于 2013-03-02T01:51:30.697 に答える
3

私は別の方法を見つけました。これは、最も簡単で、最も速く、最も扱いやすいと思います。

Angular JSでブートストラップnavbarアクティブクラスを設定するには?

それは次のとおりです。

ng-controller を使用して、ng-view の外部で単一のコントローラーを実行します。

<div class="collapse navbar-collapse" ng-controller="HeaderController">
    <ul class="nav navbar-nav">
        <li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
        <li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
        <li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>
    </ul>
</div>
<div ng-view></div>

controllers.js に以下を含めます。

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}
于 2014-06-23T20:42:10.250 に答える
1

を使用する代わりに、 ;ng-includeを使用する必要があります。ng-view

app/cars/index.htmlこれにより、またはのいずれかのコンテンツが表示されますapp/bikes/index.html

<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-view></div>

http://docs.angularjs.org/tutorial/step_07のテンプレートセクションを参照してください。

于 2013-02-28T02:42:35.267 に答える
1

show ディレクティブでサービスを使用します。

<div ng-show="myService.isActive('/')">Show this when at default route</div>
<div ng-show="myService.isActive('/cars')">Show this when at cars</div>

サービス：

myApp.factory('MyService',
    function ($location) {
        return {
            isActive: function (path) {
                return (($location.path() == path));
            }
        }
    }
);

App.js:

// this is run after angular is instantiated and bootstrapped
myApp.run(function ($rootScope, myService) {
    $rootScope.breadcrumbService = MyService;
});
于 2014-02-28T10:27:09.227 に答える