Question

我是Angular的新手，非常感谢任何建议。基本上，我有一对多的关系 - 一个Category有几个Product，我有布局页面，我在其中呈现不同的部分视图：

<div class="mainContent">
     <ng-view></ng-view>
</div>

我的第一个视图显示了类别列表，当点击其中一个时，我会显示第二个视图，该视图分为两部分：类别列表，和特定类别的产品列表，示意图如下：

我的问题是，我无法弄清楚如何将另一部分用于产品列表，因为要将它们保存在单独的.html中。

我配置了路线：

app.config(function($routeProvider, $locationProvider) {
$routeProvider
    .when('/category', {
        templateUrl: 'category.html',
        controller: 'categoryController as catCtrl'
    })
    .when('/category/:id', {
        templateUrl: 'categoryDetail.html',
        controller: 'categoryDetailController as catDetailCtrl'
    })       
    .when('/product/:category_id', {
        templateUrl: 'product.html',
        controller: 'productController as productCtrl'
    })
    .otherwise({
        redirectTo: "/category"
    });
});

和控制器：

app.controller("categoryController", function($http)
{
    var vm = this;
    vm.categories = somedata;
});
app.controller("categoryDetailController", function($http, $routeParams)
{
   var vm = this;
   vm.category = somedata;//current category from REST api, using $routeParams.id
});
app.controller("productController", function($http, $routeParams)
{
   var vm = this;
   vm.products = somedata;//product list of current category using $routeParams.category_id
});

所以在我的第一个视图 - category.html上，我有一个带有hrefs的类别列表：

<a href="#/category/{{category.id}}">

在第二个 - categoryDetail.html上，我再次列出了类别，但是使用了另一个href：

<a href="#/product/{{category.id}}">

在最后视图 - product.html我列出了产品。

直到现在，当我点击categoryDetail.html内的product.html内的类别时，mainContent会在布局的categoryDetail.html div中渲染，而是 - 我需要将其渲染为内部部分{{1} }。我尝试再次使用<ng-view>，但这似乎不正确。

Answer 1

AngularJS中有多种部分方法。

<强> NG-包含

如果没有逻辑，或者它将从父作用域提供，您可以在视图中包含一个html文件。

示例：

<div ng-include="'/path/to/your/file.html'"></div>

新指令

如果你的部分内容有点逻辑，并且你想在你的应用程序中将它作为一个单独的模块使用 - 我强烈建议你建立一个新的指令。

Example.

PS。如果您是Angular的新手，this可能会有用： - ）

AngularJS中的部分视图

1 个答案: