5

我真的是 Angular 的新手，我对将模板或 URL 发送到 ng-view 有一个小问题。但是我打算这样做的方式可能必须在我的基本模板中进行 ng-view 。

当我的模板库是这样的时：

<body>
   <div ng-view></div>
</body>

我的 JS 看起来像：

var app = angular.module('myApp',[])
.config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider
    .when('/home', {
        templateUrl: '/contato'
    })
(...)

当我只有一个 ng-view 案例时，在 ng-view 中加载 URL 可以正常工作，如果我需要加载多个 ng-view 怎么办？（例如：ng-view="area1" 和 ng-view="area2"）

我在每个 $routeProvider 中都尝试过，但不起作用：

    $routeProvider
    .when('/home', {
        area1: {templateUrl: '/path1'},
        area2: {templateUrl: '/path2'}
})

如何分别设置每个 ng-view 的正确方法是什么？

感谢任何帮助！谢谢。

4

2 回答 2

4

不幸的是，正如您现在所知道的，您的页面上不能有多个 ng-view。您应该看看 AngularUI 中的 UI-Router，它完全符合您的要求（https://github.com/angular-ui/ui-router）。

他们的文档中的一个例子（https://github.com/angular-ui/ui-router#multiple--named-views）：

设置

var myApp = angular.module('myApp', ['ui.router']);

html

<body>
    <div ui-view="viewA"></div>
    <div ui-view="viewB"></div>
    <!-- Also a way to navigate -->
    <a ui-sref="route1">Route 1</a>
    <a ui-sref="route2">Route 2</a>
</body>

模板 1

<h1>State 1</h1>

模板 2

<h1>State 2</h1>

js

myApp.config(function($stateProvider, $routeProvider) {

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

在这里，您可以在状态级别指定一个控制器，这对两个视图都有效，或者在视图级别，以便设置两个不同的控制器。

编辑：来自 ui-router 文档的现场演示 ( http://plnkr.co/edit/SDOcGS?p=preview )

于 2013-10-09T03:33:38.010 回答
3

基本上你不能有两个 ng-view。看看这个SO 问题：

您只能拥有一个 ng-view。

您可以通过多种方式更改其内容：ng-include、ng-switch 或通过 routeProvider 映射不同的控制器和模板。

于 2013-10-09T02:32:56.110 回答