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

问题描述

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

 angular.module('productapp', []).配置(['$routeProvider',函数($routeProvider){$routeProvider.当('/productapp',{templateUrl:'partials/productList.html',控制器:productsCtrl}).when('/productapp/:productId', {templateUrl: 'partials/edit.html', 控制器: editCtrl}).否则({redirectTo: '/productapp'});}],['$locationProvider', function($locationProvider) {$locationProvider.html5Mode = true;}]);

index.html

 <头><title>使用 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><身体><div ng-view></div></html>

在部分文件夹中:我有 2 个 html 视图,名为 edit.html 和 productlist.html

我不想创建这两个文件,而是希望将它们单独组合成一个,并通过路由调用它们(div).我该怎么做?

解决方案

您可以使用 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 中:

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

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>

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

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?

解决方案

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'});

And in your controller:

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

And in your html:

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

这篇关于在 angularjs 中为多个部分视图创建单个 html 视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-24 07:44