23

我希望创建一个带有多个标签的 html 文件。这些应该作为通常保存在 partials 文件夹中的单独的视图。然后我希望在路由控制器中指定它们。现在我正在做如下：app.js

    angular.module('productapp', []).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/productapp', {templateUrl: 'partials/productList.html', controller: productsCtrl}).
        when('/productapp/:productId', {templateUrl: 'partials/edit.html', controller: editCtrl}).
        otherwise({redirectTo: '/productapp'});
        }], 
        ['$locationProvider', function($locationProvider) {
            $locationProvider.html5Mode = true;
}]);

索引.html

    <!DOCTYPE html>
<html ng-app = "productapp">
<head>
<title>Search form with AngualrJS</title>
        <script src="../angular-1.0.1.min.js"></script>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="js/products.js"></script>
        <script src="js/app.js"></script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

在 partials 文件夹中：我有 2 个名为 edit.html 和 productlist.html 的 html 视图

而不是创建这两个文件，我希望将它们单独组合成一个并通过路由调用它们（div）。我该怎么做呢？

4

3 回答 3

42

您可以使用 ng-switch 根据路由参数有条件地使用包含呈现您的 productList。

在你的配置中试试这个：

    angular.module('productapp', [])
      .config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/productapp', {templateUrl: 'partials/productList.html', controller: productsCtrl})
        .when('/productapp/:productId', {templateUrl: 'partials/productList.html', controller: productsCtrl})
        .otherwise({redirectTo: '/productapp'});

在你的控制器中：

    function productsCtrl($scope, $routeParams) {
      $scope.productId = $routeParams.productId;
    }

在你的 html 中：

    <...productListHtml...>
    <div ng-switch="productId != null">
      <div ng-switch-when="true" ng-include="'partials/product.html'">
    </div>
于 2012-09-25T14:10:17.550 回答
0

我在 Angular 中遇到嵌套视图和深度链接问题，因为 $routerProvide 不支持多个 ng-view。但我找到了一个可能的解决方案，如何在此处实现这一点。它基于使用请求上下文和渲染上下文手动处理路由。

于 2013-01-18T13:57:47.280 回答
0

I Had the same problem, now there is a solution for it using: UI-Router

The advantage of using this and not the ngRoute is that you can have multiple views in the same page using "ui-view" naming convention.

于 2016-04-10T11:56:23.450 回答