使用模态控制器访问主控制器方法

时间:2018-10-11 04:00:24

标签: angularjs angularjs-scope

  // run on page load 
  //this is inside main controller that is initialized when the page loads up

function init() {
            var datepicker = $('input[name="daterange"]')
            var now = new Date();
            var startTime = moment(now).hour(0).minute(0).second(0);
            var endTime = moment(now).hour(23).minute(59).second(59);
            datepicker.daterangepicker({
                "showDropdowns": true,
                "autoApply": true,
                "maxDate": moment(),
                "autoUpdateInput": false,
                ranges: {
                    'Today': [startTime, endTime],
                    'Yesterday': [moment(startTime).subtract(1, 'days'), moment(endTime).subtract(1, 'days')],
                    'Last 7 Days': [moment(startTime).subtract(6, 'days'), moment(endTime)],
                    'Last 30 Days': [moment(startTime).subtract(29, 'days'), moment(endTime)],
                    'Last 90 Days': [moment(startTime).subtract(89, 'days'), moment(endTime)],
                    'This Month': [moment(startTime).startOf('month'), moment(endTime).endOf('month')],
                    'Last Month': [moment(startTime).subtract(1, 'month').startOf('month'), moment(endTime).subtract(1, 'month').endOf('month')]
                },
                "alwaysShowCalendars": true
            });
            datepicker.on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                $scope.taskFilter.dateFilter = $(this).val();
                $scope.$apply();
            });

            }
            init();

             $scope.filterModal = function () {

            var modalInstance = $uibModal.open({
                templateUrl: 'review-tasks.htm/filterModal',
                controller: 'filterModalCtrl',
                size: 'lg',
              windowClass: 'model-filter-window',
              backdrop: 'true',
              keyboard: 'true',
              resolve: {
                    availableReviewers: function () {
                        return $scope.availableReviewers;
                    }
              }

            });

        };

现在我有一个模态控制器,需要在其中显示日期选择器,选择日期甚至在关闭模态时仍可保留数据。

在模态控制器(filterModalCtrl)中,如何在控制器范围内使用这些方法?

现在实际上需要在模式上看到页面上加载的所有其他数据(例如,日期选择器),并在模式关闭时持续存在,这是需要处理的情况

                        angular.module('reviewportal').controller('filterModalCtrl', ['$scope', '$uibModalInstance', 'availableReviewers',
    function filterModalCtrl($scope, $uibModalInstance, availableReviewers,localStorageService, userProfileInfo, $filter) {

      $scope.availableReviewers = availableReviewers;

      $scope.ok = function () {
            $uibModalInstance.close();
        };


    }]);

1 个答案:

答案 0 :(得分:0)

将数据从主控制器传递到模式:

function showModal() {
        var modalInstance = $uibModal.open({
            templateUrl: 'review-tasks.htm/filterModal',
            controller: 'filterModalCtrl',
            size: 'lg',
            windowClass: 'model-filter-window',
            backdrop: 'true',
            keyboard: 'true',
            resolve: {
                params: function () {
                    return {
                        reviewers: $scope.availableReviewers
                    }
                }
            }
        });
        modalInstance.result.then(function (response) {
            var selectedReviewer = response; //Selected data from modal
            //do something on selectedReviewer
        });
    }

在模式中:

(function() {
    angular.module('reviewportal').controller('filterModalCtrl', ['$scope', '$uibModalInstance', 'availableReviewers',
    function filterModalCtrl($scope, $uibModalInstance, params, localStorageService, userProfileInfo, $filter) {

    $scope.availableReviewers = params.reviewers;

    $scope.selectedReviewer = $scope.availableReviewers[0]; //Sample selected data or use a bind ng-model in html.

    $scope.ok = function () {
        $uibModalInstance.close($scope.selectedReviewer); //You can also pass this selected data back to your main controller
    };

} ]);

})();