Question

我的index.html中有以下代码

<div class="container">
  <div class="row">
    <!--display vendor details -->
    <div class="col-xs-6">
      <ng-view></ng-view>
    </div>
   <!-- display chart -->
    <div class="col-xs-6">
      <ng-include src="'partials/showchart.html'"></ng-include>
    </div>
  </div>
</div>
<!--display list of invoices -->
<div class="container">
  <ng-include src="'partials/invoicelist.html'"></ng-include>
</div>

我在主页中显示三个视图，其中第一行分为两列，显示两个视图（供应商详细信息和图表），剩余页面显示第三个视图（发票列表）。

以下是 InvoiceList表中的代码：

<tbody>
  <tr ng-repeat="invoice in pendingInvoices">
    <td>
      <a href="#/vendordetail/{{invoice.Invoice_Number}}">
                        {{invoice.Invoice_Number}}
                    </a>
    </td>
    <td>{{invoice.Invoice_Date}}</td>
    <td>{{invoice.Invoice_Amount}}</td>
  </tr>
</tbody>

App.js

angular.module('Vendor', ['Vendor.Services', 'Vendor.Controllers', 'ngRoute', 'chartjs-directive']).
config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when("/.vendordetail", {
      templateUrl: "partials/vendordetail.html",
      controller: "VendorController"
    }).
    when("/vendordetail/:id", {
      templateUrl: "partials/invoicedetail.html",
      controller: "InvoiceController"
    }).
    otherwise({
      redirectTo: '/.vendordetail'
    });
  }
]);

目前，如果用户点击发票编号链接，发票详细信息将加载到第一行的第一列（替换供应商详细信息，但其他两个视图仍保留在页面中，即图表和发票清单）。我想在新页面中显示发票详细信息（即卸载所有视图）。有可能吗？

Answer 1

每当您更改视图时，只会更改<ng-view></ng-view>中的模板。为了实现这一目标，您需要将<ng-include>置于视图内。

Answer 2

我经历了ui-router，但它似乎仍在积极开发中。所以我最终将所有三个视图合二为一。它现在工作正常。所以我的新index.html是：

<div class="container">
  <div ng-view>
    <ng-include src="'partials/vendordetail.html'"></ng-include>
  </div>
</div>

vendordetail.html包含图表和发票清单视图。

重定向到AngularJS中的另一个视图，卸载当前页面中的所有视图

2 个答案: