我有一个 AngularJS 单页应用程序,显示 3 个视图(实际上是 3 个指令)。为了说明我的问题,假设我的 UI 与 GMail 的 UI 相同,并且我的 3 个视图是:
- 导航窗格(左)——GMail 在其中显示“收件箱”、“草稿”等文件夹...
- 工具栏(右上角)——GMail 显示按钮的地方
- 内容窗格(右下)——GMail 显示消息的地方
每当路径发生变化时,这 3 个视图都需要自行更新。例如:
- 导航窗格需要突出显示特定项目。
- 工具栏需要显示/隐藏某些按钮。
- 内容窗格需要从服务器加载和显示特定数据。
在 AngularJS 中执行此操作的最佳方法是什么?
到目前为止,我有:
- 排除了使用$routeProvider.when()因为我需要更新三个视图,并且
$routeProvider
只支持一个ngView
。 - 创建了一个监视当前路径的服务,并使用$rootScope.$broadcast()警告控制器路径已更改。
- (或者,代替#2)创建了一个与#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.
});
任何帮助表示赞赏。谢谢。