Question

我有一个索引页面和三个部分视图。索引页面使用ng-view动态加载部分视图。部分视图称为TestPartial1.html，TestPartial2.html和BothPartials.html。 BothPartials.html包含TestPartial1.html和TestPartial2.html，以便在单击BothPartials链接时，ng-view调用BothPartials.html，它应加载TestPartial1.html和TestPartial2.html。

我可以单独调用和显示TestPartial1.html和TestPartial2.html，但我无法弄清楚如何通过BothPartials.html一起显示两个页面。我尝试在BothPartials.html中使用ng-include来加载TestPartial1和TestPartial2但是没有用。

我的代码如下：

的Index.aspx

<body ng-app="myApp">
 <div ng-view id="ng-view"></div> 
</body>

TestPartial1.html

<div>
 <h1>View 1</h1><br />
 <a href="#View2">View2</a>
</div>

TestPartial2.html

<div>
 <h1>View 2</h1><br />
 <a href="#View1">View1</a>
 <a href="#BothViews">Both Views</a>
</div>

BothPartials.html

<div>
 <br />
 <br />
 test
 <div ng-include = "TestPartial1.html"></div>
 <div ng-include = "TestPartial2.html"></div>
</div>

App.js

(function () {
var myApp = angular.module('myApp', ['ngRoute']);    
myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/Index.aspx', {
            templateUrl: 'PartialViews/TestPartial1.html'                
        })
        .when('/View1', {                
            templateUrl: 'PartialViews/TestPartial1.html'              
        })
        .when('/View2', {               
            templateUrl: 'PartialViews/TestPartial2.html'

        })
        .when('/BothViews', {
            templateUrl: 'PartialViews/BothPartials.html'

        })
        .otherwise({ redirectTo: '/Index.aspx' });

}]);
}
)();

Answer 1

为ng-include中的TestPartial1.html和TestPartial2.html提供正确的路径。

AngularJs中的多个视图

1 个答案: