Question

我使用

使用角度寻呼机

<script type="text/javascript" src="Scripts/angular-pager.js"></script>

在MainController中，我有一个像

这样的PagerController

<body>
    <div ng-app="myapp" ng-controller="mainController">
      <div ng-controller="PagerController as vm" data-entities="Bookings"
        data-pagesize="10">
    </div>
</body>

该寻呼机控制器使用http使用数据实体中的信息填充自身，如

var app = angular.module("myapp", ["ng"])
  .controller("mainController", function ($scope, $http, $filter)
{
  /* a lot of code */
})
.factory('PagerService', PagerService)
.controller('PagerController', function (PagerService, $http, $scope, $attrs)
{
    var vm = this;
    var pageSize = $attrs["pagesize"];
    var entities = $attrs["entities"];

    vm.update = function ()
    {
        setPage(vm.pager.currentPage);
    };

    vm.setPage = setPage;

    initController();

    function initController()
    {
        setPage(1);
    }

    function setPage(page)
    {
        $http.get(entities + "/" + page + "/" + pageSize).success(function (result)
        {
            var numPages = Math.ceil(result.totalNumItems / pageSize);

            vm.pager = PagerService.GetPager(result.totalNumItems, numPages, page);
            vm.items = result.items;
        });
    }
});

当我在主控制器中完成操作时，我需要更新寻呼机，因为这些操作导致数据发生了变化。如何从mainController中的代码调用寻呼机的更新函数？

Answer 1

您可以使用rootscope broadcast来实现解决方案。

$rootScope.$broadcast正在通过应用范围发送事件。该应用的任何子级范围都可以使用简单的$scope.$on()。

来捕获它

在您的mainController中，完成更改后，您可以使用参数调用$rootScope.$broadcast()方法。

var app = angular.module("myapp", ["ng"])
  .controller("mainController", function ($scope, $http, $filter,$rootScope)
{
  /* a lot of code */
  $rootScope.$broadcast('page_changed', {page : $scope.page});
})

在PagerController中，您可以使用$rootScope.$on()

订阅该活动

$rootScope.$on('page_changed', function(event, obj){
    console.log(obj.page);
    vm.update(obj.page);
})

<强> PagerController：

.controller('PagerController', function (PagerService, $http, $scope, $attrs,$rootScope)
{
    var vm = this;
    var pageSize = $attrs["pagesize"];
    var entities = $attrs["entities"];

    $rootScope.$on('page_changed', function(event, obj){
        console.log(obj.page);
        vm.update(obj.page)
    })

    vm.update = function ()
    {
        setPage(vm.pager.currentPage);
    };

    vm.setPage = setPage;

    initController();

    function initController()
    {
        setPage(1);
    }

    function setPage(page)
    {
        $http.get(entities + "/" + page + "/" + pageSize).success(function (result)
        {
            var numPages = Math.ceil(result.totalNumItems / pageSize);

            vm.pager = PagerService.GetPager(result.totalNumItems, numPages, page);
            vm.items = result.items;
        });
    }
});

因此，只要main controller中的某些内容发生变化，只需更改广播，就会更新pager controller。

Answer 2

虽然@Sravan的答案会起作用，但最好从当前$scope $broadcast开始，所以只有这些控制器的孩子才能收到该事件。使用$rootScope，您将实际$broadcast事件发送到所有范围/控制器。

另外，不要忘记取消注册您的监听器以防止可能的泄漏。

<强> mainController

  $scope.$broadcast('pageChange', $scope.page);

<强> PagerController

var unregisterPageChangeListener = $scope.$on('pageChange', function(event, updatedPage){
   vm.pager.currentPage = updatedPage;
   vm.update();
});

$scope.$on('$destroy', function() { unregisterPageChangeListener(); }

虽然这不是你的问题，但更好的办法是通过服务/工厂在控制器之间进行沟通。

如何在子控制器中调用方法？

2 个答案: