angularjs - 使用 AngularJS 更新部分页面

Question

我正在构建一个具有侧边栏和主要内容区域的 AngularJS 应用程序。两者都由 $http 服务的单独调用填充以检索一些 JSON 数据。侧边栏中的内容基本上是一个目录，其目的是单击侧边栏项目之一将导致主要区域被更新。

我最初的尝试是将侧边栏和主要区域放在一个部分中，然后将其与执行这两种检索的 Controller 相关联。应用程序有一个将 Controller 与 URL 关联的路由，侧栏中的链接使用适当的参数访问这些 URL，这将导致所需内容出现在主区域中。所有这些都有效，但它确实会导致整个页面刷新。 “部分”确实是“全部”。

我想做的是以某种方式导致单击侧边栏链接仅触发主要内容区域的刷新。一个想法是以某种方式将其拆分为两个 Controller /部分对，并找出一种方法来导致侧边栏单击以请求更新。不过，我不确定这样做的机制。另一种方法是将内容保存在一个 Controller 中，并使用某种会触发此更新的共享状态。我试图通过在链接上设置一个 ng-click 指令来做到这一点，但这并没有像我希望的那样更新范围变量。

有没有推荐的构建应用程序的方法来实现这种 AJAX 驱动的部分页面更新？这似乎是一个相当普遍的情况，但我还没有掌握足够多的 AngularJS 来获得解决方案。

Answer 1

这就是我正在做的事情:

我有 2 项服务，1 项用于侧边菜单，另一项用于主要内容。它们都被注入(inject)到 Controller 中。

为了处理跨服务调用，我使用 $broadcast发送事件。

工作得很好，代码很干净。

有关使用基于评论的服务的附加信息

对于 sidemenu，我有一个共享菜单服务，这样所有 Controller 都可以使用相同的菜单。

maincontent 服务不必共享，但我使用它们是因为当 Controller 超出范围时服务不会丢失它们的数据。如果我不这样做， Controller 将不得不使用其他机制来重新填充其数据。对我来说，服务可以处理它而无需编写任何代码

为了显示不同的 View ，我使用以下主要布局 html

<div >
    <!-- left menu -->
    <div id="left" ng-include src="menu.view" ></div>

    <!-- main content -->
    <div id="main" ng-include src="maincontent.view"></div>
</div>

Controller

function myControllerCtrl($scope, $rootScope, menuService, maincontentService) {
    $scope.menu = menuService;
    $scope.maincontent = mainContentService
}

菜单服务

app.factory('menuService', ['$rootScope', function ($rootScope) {
    var service = {
        view: 'leftmenuview.html',

        MenuItemClicked: function (data) {
            $rootScope.$broadcast('menuitemclicked', data);
        }
    };
    return service;
}]);

主要内容服务

app.factory('maincontentService', ['$rootScope', function ($rootScope) {
    var service = {
        view: 'maincontentview.html',

        MenuItemClicked: function(data){
          //handle updating of model based on data here
        }
    };

    $rootScope.$on('menuitemclicked', function (event, data) { service.MenuItemClicked(data) });

    return service;
}]);