2013-05-03 63 views
1

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

它正確地顯示在手機列表中。但它不會觸發平板電腦列表。

建議我實現此目的的最佳做法。

+0

多個NG視圖不允許 – 2013-05-03 09:42:59

+0

您必須手動bootrstrap這兩個應用。我有同樣的問題:http://stackoverflow.com/questions/16080113/using-multiple-controllers-defined-via-module-does-not-work – 2013-05-03 09:44:51

回答

3

你不能在同一文檔中使用多個ngApp指令,如the documentation提到:

ngApp(模塊NG指令) 使用此指令自動引導的應用程序。每個HTML文檔只能使用一個指令。

你可能想要有多個controllers

+0

是的。我想要有多個控制器。你能指導我如何實現它嗎? – ramprasathrajendran 2013-05-06 09:30:58

0

給出的標記:

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

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

使用以下

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