2

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

我们现在开始将这些东西集成到一个完整的应用程序中，并且想知道如何处理基于两个不同菜单的主视图。

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

我们可以想出几种方法来做到这一点。然而，它们似乎都不正确，我们没有找到关于 Angular 开发人员如何设想这样做的明确文档。

一些精简的片段：

索引.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>

应用程序.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 的文档，但它似乎在大局中缺乏。

任何人都可以为我们提供一个链接或一些关于惯用方式的指示吗？

4

3 回答 3

4

为了让您的菜单突出显示工作，您可以在菜单控制器中设置一个简单的方法，该方法从$location提供程序中读取当前路线。（快速模拟）

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

另请参阅： 如何突出显示当前菜单项？

于 2013-08-19T19:23:30.710 回答
3

我们希望所有这三个组件都根据一些全局状态进行更改。理想情况下由基于 url 的 routeprovider 控制。

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

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

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

于 2012-11-16T15:28:00.373 回答
0

Venkat 是对的 - 使用服务。您需要在 MenuCtrl 中对正在更改的内容设置监视，以便它注意到更改。该事物可以是您公开的服务的属性，也可以是服务中函数的返回值。

当用户单击链接并且您位于第一个控制器中时，请在服务中设置一些指示菜单状态的内容。该元素是您想要在辅助控制器中监视的元素。然后，当这种情况发生变化时，级联效应是辅助控制器中的一个动作将触发，您可以使用刚刚设置的值做任何您想做的事情。

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

于 2013-08-19T19:41:30.717 回答