如何播放在AngularJS应用程序路径更改应用到所有的意见？ [英] How to broadcast path changes to all views in an AngularJS app?

问题描述

我有一个AngularJS单页显示的应用程序3次（这实际上是3 指令）。为了说明我的问题，让我们假设我的用户界面是相同的Gmail，然后我的3次分别是：

I have an AngularJS single-page app displaying 3 views (which are actually 3 directives). To illustrate my question, let's assume my UI is identical to that of GMail and that my 3 views are:

• 导航窗格中（左） - 在Gmail会显示文件夹，如收件箱，草稿...


• 工具栏（右上） - 在Gmail会显示按钮


• 内容窗格（右下） - 在Gmail会显示消息

• Navigation Pane (left) -- where GMail displays folders like "Inbox", "Drafts"...
• Toolbar (top right) -- where GMail displays buttons
• Content Pane (bottom right) -- where GMail displays messages

这3次需要每当路径更改为自我更新。例如：

These 3 views need to update themselves whenever the path changes. For example:

• 导航窗格需要突出显示特定项目。


• 工具栏需要显示/隐藏某些按钮。


• 内容窗格中需要从服务器加载和显示特定的数据。

什么是在AngularJS做到这一点的最好方法是什么？

What's the best way to do this in AngularJS?

到目前为止，我有：

1. 排除了使用 $ routeProvider.when（），因为我需要更新三个视图和 $ routeProvider 只支持一个 ngView 。


2. 创建一个服务会监视当前路径，并使用 $ rootScope 。$广播（）警告说，路径更改控制器。


3. （OR，代替＃2）创建一个控制器，做同样的＃2。


4. 夹缝＃2或＃3 $范围广播的事件。在$（）（我这样做在一个视图控制器）。

1. Ruled out the use of $routeProvider.when() because I need to update three views, and $routeProvider only supports one ngView.
2. Created a SERVICE that watches the current path and uses $rootScope.$broadcast() to warn the controllers that the path changed.
3. (OR, IN LIEU OF #2) Created a CONTROLLER that does the same as #2.
4. Caught the event broadcasted by #2 or #3 with $scope.$on() (I do this in a view controller).

这类型的作品，但我有几个问题：

This kind of works, but I have several issues:

• 路径变化事件通常广播在我的事件监听器很到位，尤其是在初始页面加载。这可能是由于我的视图模板是从服务器加载和听众不能成立前的模板已经加载完毕的事实。


• 难道没有看在AngularJS路径中的变化更高效/自动化的方式？ （见我的code以下，似乎pretty手动。）


• 是否code的手表路径改变一个服务或控制器中属于？ （我会偏向一个服务，因为控制器更是添加行为视图。）


• 如何保证我的观点将捕获的路径更改事件的？我应该使用一个事件呢？ （也许我可以在路径存储在服务，并有我的观点看服务，而不是？）

我的code为路径的变化看（我把这个服务或在控制器中）：

My code to watch for path changes (I put this in a service or in a controller):

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

然后，在视图控制器，我赶上事件：

Then, in a view controller, I catch the event:

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

任何帮助AP preciated。谢谢你。

Any help appreciated. Thanks.

推荐答案

您最终版本显得精致与locationChangeSuccess，但对于其他人读这篇文章，我想你也很快排除了$ routeProvider。你可以有一个NG-视图与路径变化的主要内容窗格，然后其他独立（静态）控制器/在导航窗格和工具栏的模板。

Your final version seems fine with the locationChangeSuccess, but for others reading this, I think you ruled out the $routeProvider too quickly. You can have one ng-view for the main content pane that changes with the path, and then other independent ("static") controllers/templates for the navigation pane and toolbar.

现在听路由变化在这些其他2个控制器：

Now to listen to route changes in these other 2 controllers:

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

所有使用本地角功能。其实我这样做是 http://provok.in ，一个网站，我建采用了棱角分明，和我有一个类似的布局（当然，不完全，但我有静态部分和NG-视图为主要内容，动态更新的基础的道路上，由routeProvider）。

All using native Angular functionality. I actually do this in http://provok.in, a website I built using Angular, and I have a similar layout (well, not exactly, but I have "static" sections and an ng-view for the main content, dynamically updated based on the path, by the routeProvider).

这篇关于如何播放在AngularJS应用程序路径更改应用到所有的意见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！