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

我使用角尋呼機通過使用如何在子控制器中調用方法？

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

在MainController，我喜歡

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

一個PagerController即尋呼機控制器使用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中的代碼調用尋呼機的更新函數？

來源

2016-11-16 Anders Lindén

雖然@ 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(); }

雖然這不是你的問題，甚至更好的還是通過服務/工廠控制器之間的通信。

來源

2016-11-16 10:28:33

您可以使用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。

來源

2016-11-16 10:22:05 Sravan

@AndersLindén，請檢查我的答案。 – Sravan

感謝您的回答！我想接受你的兩個答案，並使用隨機生成器來決定我應該接受哪個答案。 –

是的，但我喜歡這兩個答案。 –

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

回答

相關問題