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

Question

I have following code in my 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> 

I am displaying three views in the home page wherein the first row is divided in two columns displaying two views(Vendor details and a chart) and remaining page shows the third view(invoice list).

Following is my code in InvoiceList table :

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

Currently if the user clicks on the invoice number link the invoice details are loaded in the first column of the first row( replacing the Vendor Details, but other two views remain in the page ie chart and the invoice list). I want to display the invoice details in a new page(ie unload all the views). Is it possible?

Answer 1

Whenever you change views, only the template within <ng-view></ng-view> will change. In order to accomplish this, you'll need to put the <ng-include> inside of your view.

Answer 2

I went through the ui-router but it seems that it is still under active development. So I ended up combining all the three views in one. and it works fine now. So my new index.html is :

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

vendordetail.html contains the chart and invoice list views.