AngularJS - 单个页面的多个$ http请求

问题描述：

我使用angularJS对单个网页进行了devloping。该页面应该显示来自其他服务的内容，这些内容将返回值为JSON。

我使用类似下面，

查看文件：

<div ng-app="phonecat"> 
    <div ng-view></div> 
</div> 

<div ng-app="tabletcat"> 
    <div ng-view></div> 
</div>

应用js文件

angular.module('phonecat', []). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). 
     otherwise({redirectTo: '/phones'}); 
}]); 

angular.module('tabletcat', []). 
    config(['$routeProvider', function($routeProvider) { 
     $routeProvider. 
     when('', {templateUrl: 'partials/tablet-list.html', controller: TabListCtrl}). 
     otherwise({redirectTo: '/phones'}); 
}]);

它正确地显示在手机列表中。但它不会触发平板电脑列表。

建议我实现此目的的最佳做法。

多个NG视图不允许 – 2013-05-03 09:42:59

您必须手动bootrstrap这两个应用。我有同样的问题：http://stackoverflow.com/questions/16080113/using-multiple-controllers-defined-via-module-does-not-work – 2013-05-03 09:44:51

答

你不能在同一文档中使用多个ngApp指令，如the documentation提到：

ngApp（模块NG指令）使用此指令自动引导的应用程序。每个HTML文档只能使用一个指令。

你可能想要有多个controllers？

是的。我想要有多个控制器。你能指导我如何实现它吗？ – ramprasathrajendran 2013-05-06 09:30:58

答

给出的标记：

<div id="phonecatElement"> 
    <div ng-view></div> 
</div> 

<div id="tabletcatElement"> 
    <div ng-view></div> 
</div>

使用以下

angular.bootstrap($('#phonecatElement'), ["phonecat"]); 
angular.bootstrap($('#tabletcatElement'), ["tabletcat"]);

AngularJS - 单个页面的多个$ http请求

相关推荐