在angularjs中为多个部分视图创建一个html视图 [英] create a single html view for multiple partial views in angularjs
问题描述
我希望创建一个带有多个标签的 html 文件.这些应该作为通常保存在 partials 文件夹中的单独的视图.然后我希望在路由控制器中指定它们.现在我正在做如下: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
<!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 个名为 edit.html 和 productlist.html 的 html 视图
in partials folder: i have 2 html views named edit.html and productlist.html
我希望将它们单独合并为一个，并通过路由调用它们(div)，而不是创建这 2 个文件.我该怎么做?
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?
推荐答案
您可以使用 ng-switch 有条件地渲染您的 productList 并包含包含，具体取决于路由参数.
You could use ng-switch to conditionally render your productList with an include, depending on the route parameters.
在你的配置中试试这个:
Try this in your config:
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视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
