在Angular中同步多个视图

在过去的几天里，我们一直在为我们的REST服务编写一个基于angular.js的新前端。到目前为止，事情正在顺利进行，并且我们已经建立了许多小页面和组件。在Angular中同步多个视图

我们现在开始把这些东西整合成一个完整的应用程序，但是不知道如何处理基于两种不同的菜单的主视图。

我们希望所有这三个组件都基于某种全局状态进行更改。理想情况下由基于url的$routeProvider控制。

我们可以想到几种方法来做到这一点。然而，他们中没有一个看起来是正确的，我们没有找到关于角度开发人员如何设想完成的明确文档。

有些降低片段：

的index.html

<!DOCTYPE html> 
<html data-ng-app="myapp"> 
<head> 
    ....snip... 
</head> 
<body> 
    <div id="system-menu" data-ng-controller="MenuCtrl" data-ng-include="'partials/menu/system.html'"></div> 
    <div id="main"> 
     <div id="main-menu" data-ng-controller="MenuCtrl" data-ng-include="'partials/menu/main.html'"></div> 
     <div id="content" data-ng-view></div> 
    </div> 
</body>

app.js

var myapp = angular.module('myapp', ['ngResource', 'ui']). 
    config(['$routeProvider', function($routeProvider) { 
     $routeProvider. 
      when('/messages', { 
       templateUrl: 'partials/messages.html', 
       controller: MessagesCtrl 
      }). 
      when('/messages/:messageId', { 
       templateUrl: 'partials/messages.html', 
       controller: MessagesCtrl 
      }). 
      ...snip... 
      otherwise({ 
       redirectTo: '/messages' 
     }); 
    }]);

当用户点击的链接/消息/ 1我想控制器messagesCtrl是用于视图。这很容易，并且如上所述发挥作用。不过，我的MenuCtrl不会“注意”这种情况发生，并且手动广播一条消息让它知道页面变化，因此它可以显示子菜单对我来说似乎很难看。因为这条消息的唯一原因是更新菜单导致对其他控制器不需要的知识。

到目前为止，我们喜欢上angular.js的文档，但似乎缺乏在大画面的部门。

任何人都可以向我们提供的惯用的方式做到这一点的链接或一些指针？

来源

2012-11-16 martijnve

我们希望所有这三个组件都基于一些全局状态进行更改。由路由提供者根据网址进行理想控制。

要在控制器之间进行通信，您可以创建一个服务，该服务可以将更改广播到其所有订户。

结帐视频

http://www.youtube.com/watch?v=1OALSkJGsRw

来源

2012-11-16 15:28:00 venkat

这很好地解释了控制器间的通讯，谢谢。然而，它并没有以一种干净的方式解决我的问题。让我试着更具体：当用户点击链接到/消息/ 1我希望控制器messagesCtrl用于视图。这很容易，并且如上所述发挥作用。然而，我的MenuCtrl并没有“注意到”这种情况发生，并手动广播一条消息让它知道页面变化，因此它可以显示子菜单对我来说似乎很难看。因为这条消息的唯一原因是更新菜单导致对其他控制器不需要的知识。 – martijnve

为了让您的菜单高亮以下YouTube视频和jsfiddles环节的工作你可以设置你的菜单控制器内的简单方法，从读出当前路由。在$location提供商（快速轻慢）

// Within your controller. 
$scope.isActiveUrl = function (route) { 
    return route === $location.path() 
} 
// 
Within the view 
ng-class="{ 'active' : isActiveUrl('your/path') }"

另见： How to highlight a current menu item?

来源

2013-08-19 19:23:30 ngr

Venkat是正确的 - 使用服务。您需要在MenuCtrl中设置一个关于正在改变的事件的手表，以便它能够注意到这一变化。该事物可以是您公开的服务的属性，也可以是服务中函数的返回值。

当用户点击链接并且您在第一个控制器中时，在服务中设置一些指示菜单状态的内容。这个元素就是你想要在你的辅助控制器中放置一个监视器。然后，当这种变化发生时，级联效应是次级控制器中的操作将会触发，并且您可以根据您刚刚设置的值执行任何操作。

显然，您需要将这些服务注入到您的两个控制器中。

来源

2013-08-19 19:41:30 BoxerBucks

在Angular中同步多个视图

回答

相关问题