创建在angularjs多个局部视图一个HTML视图 [英] create a single html view for multiple partial views in angularjs
问题描述
我要创建具有多个标签一个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视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
