4

我正在构建我的第一个 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 可以工作，但 <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

这是预期的行为吗？我究竟做错了什么？

谢谢，斯科特

4

1 回答 1

0

对于与整个应用程序相关而不是某个模块的全局内容 - 就像标题一样，我建议你将逻辑放在主控制器中：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>
于 2013-11-07T15:01:30.000 回答