在angularjs中爲多個部分視圖創建單個html視圖

我希望創建具有多個標記的單個html文件。這些應該作爲獨立的單獨視圖，通常保存在partials文件夾中。然後我想在路由控制器中指定它們。現在我做如下： app.js在angularjs中爲多個部分視圖創建單個html視圖

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 HTML視圖和productlist.html

而不是創建這2個文件，我希望將它們合併爲一個單獨的並通過路由調用它們（divs）。我該怎麼做？

來源

2012-09-25 z22

請解釋。你想添加div到index.html嗎？ –

不是在index.html中，而是在其他一些HTML文件中 – z22

爲什麼不使用jQuery？或只是JavaScript顯示/隱藏div，全部在同一個div中。 – nycynik

您可以使用ng-switch根據路徑參數有條件地使用include包含您的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-25 14:10:17

我有嵌套的意見和深層鏈接的問題在Angular中，$ routerProvide不支持多個ng-view ..但是我發現了一個可能的解決方案，使得這種情況發生n here。它基於使用請求上下文和渲染上下文手動處理路由。

來源

2013-01-18 13:57:47

我有同樣的問題，現在有使用它的解決方案： UI-Router

使用這個，而不是ngRoute是，你可以使用「UI視在同一個頁面多個視圖的優點「命名約定。

來源

2016-04-10 11:56:23

在angularjs中爲多個部分視圖創建單個html視圖

回答

相關問題