AngularJS - 應用程序架構
[英]AngularJS - app architecture
問題描述
我正在構建我的第一個AngularJS應用程序。
我想在路由更改時動態更改頁面標題，所以我首先嘗試將我的應用程序結構化為：
<html ng-app>
我想要一個頁面級控制器，然后在它下面有子控制器。
所以，我開始：
var app = angular.module("squareUpYourSavings", ["page1", "page2", "..."]);
app.controller('GlobalController', ['$scope', '$rootScope', function GlobalController($scope, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.title = current.$$route.title;
});
$rootScope.$on("$locationChangeStart", function (event, nextLocation, currentLocation) {
console.log('nextLocation :: ' + nextLocation);
console.log('currentLocation :: ' + currentLocation);
});
但這不起作用。 （不知道為什么）我有一個導航指向目錄級控制器和ng-view DOES工作，但<title>不會改變。 $ locationChange聽眾也根本沒有開火。 好像這個頂級控制器甚至根本沒有被聽到。
那么，我改變了<html>元素來指定頂級控制器：
<html id="ng-app" ng-controller="GlobalController">
這確實有效，但路線似乎是兩次射擊。 初始頁面加載顯示：
nextLocation :: location.html#/
currentLocation :: location.html#/
當我然后去一條路線時，它會正確地觸發之前和之后，但是當我到達那里時會再次點火：
nextLocation :: location.html#savings-video // expected
currentLocation :: location.html#/ // expected
nextLocation :: location.html#/savings-video/ // not expected
currentLocation :: location.html#savings-video // not expected
這是預期的行為嗎？ 我究竟做錯了什么？
謝謝，斯科特
1 個解決方案
解決方案1
0 已采納 2013-11-07 15:01:30
對於與整個應用程序相關的全局內容而不是某個模塊 - 比如標題，我建議您將邏輯放在主控制器中 ： run模塊方法：
var app = angular.module("squareUpYourSavings", ["page1", "page2", "..."]);
app.run(function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.title = current.$$route.title;
});
});
哦，你應該離開你的路由器來決定哪個控制器處於“ 控制 ”狀態：
<html ng-app>
AngularJS應用架構/結構
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.