创建在angularjs多个局部视图一个单一的HTML视图(create a single html

我想创建一个包含多个标签的一个HTML文件。这些应该采取行动了通常保存在文件夹中的谐音作为单独的个人意见。然后我想在路由控制器来指定。现在我做如下：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个HTML视图命名edit.html和productlist.html

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

Answer 1:

你可以使用NG-开关有条件地呈现与您的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>

Answer 2:

我曾与嵌套的观点和角度为$ routerProvide不支持多NG-视图深层链接的问题。但我发现了一个可能的解决方案是如何做到这一点在这里。它基于使用手动请求上下文和语境呈现递路线。

Answer 3:

我有同样的问题，现在有使用它的解决方案： UI-路由器

使用此而不是ngRoute的好处是，你可以使用“用户界面视图”命名约定在同一页面多个视图。

文章来源: create a single html view for multiple partial views in angularjs

创建在angularjs多个局部视图一个单一的HTML视图(create a single html

Answer 1:

Answer 2:

Answer 3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮