创建在angularjs多个局部视图一个HTML视图 | 创建在angularjs多个局部视图一个HTML视图

本文介绍了创建在angularjs多个局部视图一个HTML视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我要创建具有多个标签一个HTML文件。这些应该采取行动，通常是保存在文件夹分音作为单独的个人意见。
然后我希望路由控制器指定它们。
现在我做如下：
app.js

I wish to create a single html file with multiple tags. These should act as separate individual views that are usually kept in partials folder.And then i wish to specify them in routing controller.For now i am doing as follows: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;
}]);

index.html的

index.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>

在局部模板文件夹：
我有2个HTML视图命名edit.html和productlist.html

in partials folder:i have 2 html views named edit.html and productlist.html

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

instead of creating these 2 files i wish combine them into one in separate and call them (the divs) through routing.How do i do this?

推荐答案

您可以使用纳克开关有条件地呈现与您的productList的包括，根据不同的路径参数。

You could use ng-switch to conditionally render your productList with an include, depending on the route parameters.

试试这个在你的配置：

    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：

And in your html:

    <...productListHtml...>
    <div ng-switch="productId != null">
      <div ng-switch-when="true" ng-include="'partials/product.html'">
    </div>

这篇关于创建在angularjs多个局部视图一个HTML视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！