Question

我有一个AngularJS单页面应用程序，显示3个视图（实际上是3 directives）。为了说明我的问题，让我们假设我的用户界面与GMail的用户界面相同，我的3个观点是：

导航窗格（左） - GMail显示“收件箱”，“草稿”等文件夹......
工具栏（右上角） - GMail显示按钮的位置
内容窗格（右下角） - GMail显示消息的位置

这三个视图需要在路径更改时自行更新。例如：

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

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

到目前为止，我有：

排除了$routeProvider.when()的使用，因为我需要更新三个视图，$routeProvider仅支持一个ngView。
创建一个 SERVICE ，用于监视当前路径并使用$rootScope.$broadcast()警告控制器路径已更改。
（OR，IN LIEU OF＃2）创建 CONTROLLER ，与＃2相同。
使用$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）。

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

1 个答案: