Question

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

我们现在开始将这些内容整合到一个完整的应用程序中，并且想知道如何根据两个不同的菜单来处理主视图。

我们希望所有这三个组件都根据某些全局状态进行更改。理想情况下由基于网址的$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'
        });
    }]);

当用户点击指向/ messages / 1的链接时，我希望控制器messagesCtrl用于视图。这很简单，如上所述。然而，我的MenuCtrl没有“注意到”这种情况，并且手动广播消息让它知道页面更改，因此它可以显示子菜单对我来说似乎很难看。因为此消息的唯一原因是更新菜单导致其他控制器的一些不需要的知识。

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

任何人都可以向我们提供关于这种惯用方法的链接或指示吗？

Answer 1

为了让您的菜单突出显示工作，您可以在菜单控制器中设置一个简单的方法，从$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?

Answer 2

我们希望所有这三个组件都基于某些变化全球国家。理想情况下由routeprovider控制网址。

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

在视频中查看以下youtube视频和jsfiddles链接

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

Answer 3

Venkat是对的 - 使用服务。你需要在MenuCtrl中设置一个更改的东西，以便它注意到变化。该东西可以是您公开的服务的属性，也可以是服务中函数的返回值。

当用户点击链接并且您在第一个控制器中时，在服务中设置指示菜单状态的内容。该元素是您想要在辅助控制器中加注的元素。然后，当更改时，级联效果是辅助控制器中的操作将触发，您可以使用您刚设置的值执行任何操作。

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

在Angular中同步多个视图

3 个答案: