AngularJs中的多视图_Angularjs_Ngroute

AngularJs中的多视图

angularjs

AngularJs中的多视图,angularjs,ngroute,Angularjs,Ngroute,我有一个索引页和三个局部视图。索引页正在使用ng视图动态加载部分视图。部分视图称为TestPartial1.html、TestPartial2.html和BothPartials.html。BothPartials.html同时包含TestPartial1.html和TestPartial2.html，因此当单击BothPartials链接时，视图调用BothPartials.html，它应该同时加载TestPartial1.html和TestPartial2.html 我能够分别调用和显示Te

我有一个索引页和三个局部视图。索引页正在使用ng视图动态加载部分视图。部分视图称为TestPartial1.html、TestPartial2.html和BothPartials.html。BothPartials.html同时包含TestPartial1.html和TestPartial2.html，因此当单击BothPartials链接时，视图调用BothPartials.html，它应该同时加载TestPartial1.html和TestPartial2.html

我能够分别调用和显示TestPartial1.html和TestPartial2.html，但我不知道如何通过这两个partials.html同时显示这两个页面。我曾尝试在partials.html中使用ng include来加载TestPartial1和TestPartial2，但没有效果

我的代码如下：

Index.aspx

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

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

可能是因为您的

ng include

是一个相对路径。尝试绝对路径：

ng include=“/PartialViews/TestPartial1.html”

如果您想要多个视图，最好长时间使用ui路由器run@Coop我尝试了以下不同的组合，但没有任何用处：“~/Restricted/PartialViews/TestPartial1.html”、“/PartialViews/TestPartial1.html”、“/TestPartial1.html”控制台中是否有可见错误？@Coop，控制台中没有错误。我接受了maurycy的建议并使用ui路由器。谢谢你的帮助。我尝试了以下不同的组合，但没有用：“~/Restricted/PartialViews/TestPartial1.html”、“/PartialViews/TestPartial1.html”、“/TestPartial1.html”

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

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

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

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

}]);
}
)();