12

ビューを作成しようとしています - 練習用に 2 つのコントローラーを設定しました。1 つは HeaderCtrl で、その中にいくつかのデータ (サイト タイトル、ヘッダーの背景など) があり、もう 1 つはページのメイン コンテンツ (MainCtrl) を持つ必要があります。

ルートを定義するときは、次のようにしています。

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   })
})

これは完全に正常に機能しますが、次のように複数のパラメーターを指定する必要があります。

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'HeaderCtrl',
       templateUrl: 'modules/header.html'
   },
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   })
})

これはうまくいかないので、それを行う方法ではないと思います。私が実際に求めているのは、 $routeProvider で複数のコントローラーを指定できますか? または、このビューを構築する正しい方法は何でしょうか?

4

5 に答える 5

16

この問題に対する私のアプローチは、対応するテンプレートを参照するヘッダーとメインの 2 つのディレクティブを用意することです。

例えば：

app.directive('header', function () {
  return {
    restrict: 'A',
    replace: true,
    templateUrl:'templates/header.html'
  }
})

次に、ディレクティブを含むページを作成できます - index.html。

<div header></div>
<div main></div>

次に、index.html にルーティングするコントローラーを1 つ用意します。

ヘッダーとメインを別々に扱いたい場合は、ヘッダーとメインのコントローラーを別々にカプセル化することもできます。

例えば

<div ng-controller="HeaderCtrl">
    <div header></div>
</div>
<div ng-controller="MainCtrl">
    <div main></div>
</div>

またはテンプレート自体を使用

于 2013-06-28T01:03:45.363 に答える
2

angular の ui-router を使用する必要があります: https://github.com/angular-ui/ui-router。ページの「要素」ごとにコントローラーとテンプレートを指定できます。

myApp.config(function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      views: {
        "viewA": { template: "index.viewA" },
        "viewB": { template: "index.viewB" }
      }
    })
    .state('route1', {
      url: "/route1",
      views: {
        "viewA": { template: "route1.viewA" },
        "viewB": { template: "route1.viewB" }
      }
    })
    .state('route2', {
      url: "/route2",
      views: {
        "viewA": { template: "route2.viewA" },
        "viewB": { template: "route2.viewB" }
      }
    })
});

于 2015-08-28T18:33:15.347 に答える
2

やりたいことは、HeaderCtrl外側に配置しng-viewてMainCtrlから、インデックス ルート (つまり、「/」) にマップすることです。複数のコントローラーをインデックス ルートにマップする必要がある場合は、そのルートにマップしたテンプレート内でそれらを割り当てることができます。これは次のようになります。

index.html

<html>
<body ng-app='yourApp'>
    <div id="header" ng-controller="HeaderCtrl"></div>
    <div ng-view></div>
</body>
</html>

app.js

angular.module('mainApp', []).
config(function ($routeProvider) {
    $routeProvider.when('/', {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   })
});

ダッシュボード.html

<div ng-controller="SomeCtrl"></div>
<div ng-controller="SomeOtherCtrl"></div>

...または、本当にクリエイティブになりたい場合はui-router、AngularUI の人々から含めることができますhttps://github.com/angular-ui/ui-routerこれにより、複数の「ビュー」を使用して、それらをルート。

于 2013-06-27T23:48:29.243 に答える
-1

これを試してみてください

mainApp.config(function ($routeProvider) {
$routeProvider
   .when('/',
   {
       controller: 'HeaderCtrl',
       templateUrl: 'modules/header.html'
   }).when('',  //route here in the empty quotes
   {
       controller: 'MainCtrl',
       templateUrl: 'modules/dashboard.html'
   });
});
于 2013-09-20T10:56:21.340 に答える