在同一個DOM上使用多個Angular.js控制器

對於Angular.js來說，我很新，並試圖在Node.js應用程序上實現它。在同一個DOM上使用多個Angular.js控制器

我已經成功地爲單個控制器使用角度創建RESTful API，但現在想要在單個DOM上使用兩個或多個控制器。

具體而言，我想..

1）使用的角度來加載全局範圍包含的東西等的網站的標題，導航，和元數據，所有這些都將被加載到所述頭部的DOM模板，頁眉和頁腳。範圍將被使用GET請求拉到我的節點服務器。

2）使用angular爲給定頁面加載範圍。這將根據每個頁面的具體情況而定。簡單的情況是將範圍加載到模板中。

我已經成功地分別完成了（1）和（2），但將它們組合起來會引發錯誤。

這裏是我的完整模板（由節點的部分實際上加載）：

頭 - 含NG-控制器= 「configCtrl」全球配置範圍

<html ng-app="angular" ng-controller="configCtrl" ><head> 

<meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> 
<title>{{context.title}}</title> 
<meta name="description" content="{{context.description}}"> 
<meta name="author" content="{{context.author}}"> 

<!-- Angular --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 

</head><body><div id="wrapper" >

身體 - 含ng-controller =「testCtrl」用於此特定頁面範圍

<div class="container" ng-controller="testCtrl">  
    <div class="gutter col hidden-xs">&nbsp;</div> 
    <div class="content col" > 

     <div class="py80"> 

      <h1>{{context.test}}</h1> 

     </div> 

    </div> 
    <div class="gutter col hidden-xs">&nbsp;</div> 
</div> 

<!-- ANGULAR CONTROLLER FOR THIS PAGE --> 
<script src="/public/js/angular/test_controller.js"></script>

頁腳 - 包括鏈接到控制器全球範圍

<footer id="footer" ></footer> 
</div></body></html> <!-- close tags--> 

<!-- ANGULAR CONTROLLER FOR GLOBAL CONFIGURATION SCOPE --> 
<script src="/public/js/angular/config_controller.js"></script>

這裏是我的「配置範圍」

var app = angular.module('angular', []); 

app.controller('configCtrl', function($scope, $http) { 

    console.log("config controller"); 

    $http.get('/config').then(function(response){ 

     console.log(response.data); 

     $scope.context = response.data; 

    }); 

});

這裏角控制器是我的角控制器的頁面適用範圍

var app = angular.module('angular', []); 

app.controller('testCtrl', function($scope, $http) { 

    console.log("test controller"); 

    $http.get('/test').then(function(response){ 

     console.log(response.data); 

     $scope.context = response.data; 

    }); 

});

我有一些服務器端控制器將數據返回回角，如上所述，它們各自獨立工作使用，但使用它們一起（如上所示）引發以下客戶端錯誤時：

angular.js:13920 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=testCtrl&p1=not%20a%20function%2C%20got%20undefined 
at angular.js:38 
at sb (angular.js:1892) 
at Pa (angular.js:1902) 
at angular.js:10330 
at ag (angular.js:9451) 
at p (angular.js:9232) 
at g (angular.js:8620) 
at g (angular.js:8623) 
at g (angular.js:8623) 
at g (angular.js:8623)

任何建議？

來源

2016-11-24 yevg

問題是你正在初始化應用程序兩次。這樣做只有一次：

var app = angular.module('angular', []);

你會沒事的。最好的做法是到該行進行分離到另一個文件完全（如「APP-initialize.js」），然後，你可以這樣做：

angular.module('angular').controller(...);

在所有的文件。

來源

2016-11-24 02:14:05 2ps

作品！謝謝。我想這是簡單的 – yevg

var app = angular.module('angular', []);

你調用此線的兩倍（根據你的例子），這將創建一個名爲「角」兩次模塊。

此外，您可以創建工廠或服務，而不是使用控制器進行配置，並將其注入任何需要它的控制器。（大致:)

var app = angular.module('someApp', []); 
app.controller('testCtrl', function($scope, $http, configFactory) { 

    $scope.getConfig = function() { 
     configFactory.getConfig() 
     .success(function (someConfig) { 
      console.log(someConfig); 
     }); 
    } 

    $scope.getConfig(); 

    console.log("test controller"); 
    $http.get('/test').then(function(response){ 
     console.log(response.data); 
     $scope.context = response.data; 
    }); 

}); 
app.factory('configFactory', ['$http', function($http) { 
    var getConfig = function() { 
     return $http.get('/config'); 
    } 
    return getConfig; 
}]);

替代地，可以創建一個配置模塊並傳遞作爲依賴。

var config = angular.module('config', []).constant('config', { 'something': 2 }); 
... 

var app = angular.module('someApp', ['config']); 
...

來源

2016-11-24 02:24:32

啊！感謝您的解決方案並提供最佳實踐！ – yevg

在同一個DOM上使用多個Angular.js控制器

回答

相關問題