如何在AngularJS应用程序中广播所有视图的路径更改？

Question

我有一个AngularJS单页面应用程序显示3个视图(实际上是3个指令).为了说明我的问题,让我们假设我的UI与GMail的UI相同,我的3个视图是:

• 导航窗格(左) - GMail显示"收件箱","草稿"等文件夹......
• 工具栏(右上角) - GMail显示按钮的位置
• 内容窗格(右下角) - GMail显示消息的位置

每当路径发生变化时,这3个视图都需要自我更新.例如:

• 导航窗格需要突出显示特定项目.
• 工具栏需要显示/隐藏某些按钮.
• 内容窗格需要从服务器加载和显示特定数据.

在AngularJS中执行此操作的最佳方法是什么？

到目前为止,我有:

1. 排除了$ routeProvider.when()的使用,因为我需要更新三个视图,并且$routeProvider只支持一个视图ngView.
2. 创建一个监视当前路径的SERVICE并使用$ rootScope.$ broadcast()来警告控制器路径已更改.
3. (或者,取代#2)创建一个与#2相同的控制器.
4. 使用$ scope. $ on()捕获#2或#3广播的事件(我在视图控制器中执行此操作).

这种作品,但我有几个问题:

• 在我的事件监听器到位之前,通常会广播"路径更改"事件,尤其是在初始页面加载时.这可能是因为我的视图模板是从服务器加载的,并且在模板加载完成之前无法设置监听器.
• 是不是有一种更有效/自动化的方式来监视AngularJS中的路径变化？(参见下面的代码,看起来非常"手动".)
• 监视路径更改的代码是属于SERVICE还是CONTROLLER？(我倾向于服务,因为控制器更多是为视图添加行为.)
• 如何保证我的观点能够抓住"路径改变"事件？我应该使用一个活动吗？(也许我可以将路径存储在服务中,让我的视图代替服务？)

我需要注意路径更改的代码(我把它放在服务中或控制器中):

var watchExpression = function() { return $location.path(); };
var listener = function(newPath, oldPath) {
    // Broadcast event on $rootScope
    $rootScope.$broadcast('PathChanged', newPath);
};
$rootScope.$watch(watchExpression, listener);

然后,在视图控制器中,我捕获事件:

$scope.$on('PathChanged', function(event, path) {
    // Update view based on new path.
});

任何帮助赞赏.谢谢.

Answer 1

你的最终版本显得精致与locationChangeSuccess,但对于其他人阅读此,我想你也很快排除了$ routeProvider.您可以为主内容窗格提供一个ng视图,该视图随路径一起更改,然后是导航窗格和工具栏的其他独立("静态")控制器/模板.

现在,在这些其他2个控制器中监听路由更改:

$rootScope.$on('$routeChangeSuccess', function(evt, cur, prev) {
    ...do what you have to do here, maybe set a $rootScope.path as you did
})

全部使用原生Angular功能.我实际上在http://provok.in中这样做,我使用Angular构建的网站,我有一个类似的布局(好吧,不完全是,但我有"静态"部分和主要内容的ng视图,动态由routeProvider根据路径更新.