Question

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

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

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

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

Answer 1

这就是我正在做的事情：

我有2个服务，1个用于sidemenu，另一个用于主要内容。它们都被注入控制器。

要处理跨服务呼叫，我使用$broadcast发送事件。

工作得非常好，而且代码非常干净。

有关使用基于评论的服务的其他信息

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

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

为了显示不同的视图，我使用以下主要布局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>

控制器

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;
}]);

使用AngularJS进行部分页面更新

1 个答案: