Question

我试图在AngularJS中操作模态内的数据，然后在模态之外查看它。所以我必须将数据从内部控制器（由模态使用）传递给外部控制器。要将数据从外部控制器放入内部控制器，我已经借助resolve选项$modal.open完成了此操作：

myApp.controller('MyCtrl', function ($scope, $modal) {

$scope.number = 1;

$scope.openModal = function () {
    $modal.open({
        templateUrl: 'myModalContent.html',
        backdrop: true,
        windowClass: 'modal',
        controller: function ($scope, $modalInstance, number) {
            $scope.number = number;
            $scope.submit = function () {

                //How to iterate var number in the outer controller?
                //$scope.number++;

                $modalInstance.dismiss('cancel');
            }
        },
        resolve: {
            number: function () {
                return $scope.number;
            }
        }
    });
   };
});

现在我想在模态中计算数字并将其显示在模态之外。 $scope.number 显然只影响当前控制器中的数字，那么如何设置外部控制器的变量呢？

这是我的Fiddle。

我们将不胜感激。

Answer 1

我会将您的数据保存到服务中，以便可以在控制器之间传递。

myApp.factory('modalDataService', function () {
    var modalData = {}; 
    return {
        getData: function () {
            return modalData;
        },
        setData: function (newModalData) {
            modalData = newModalData;
        },
        resetData: function () {
            modalData = {};
        }
    };
});

然后，您可以通过将工厂作为依赖项传入并调用以下函数来从控制器访问数据：

modalDataService.getData();
modalDataService.setData(newModalData);
modalDataService.resetData();

Answer 2

尝试_scope = $ scope;保持对外部控制器的引用。在内部控制器内部，使用_scope.number ++; 工作小提琴：

"http://jsfiddle.net/5xop3wL9/5/"

Answer 3

您可以添加对外部控制器$scope的引用，然后使用新引用增加number。

...
$scope.number = 1;
$higherScope = $scope;
...
//Inside submit
$scope.submit = function () {

                    //How to iterate var number in the outer controller?
                    $higherScope.number++;

                    $modalInstance.dismiss('cancel');
                }

更新了 Fiddle

如何将数据从模态的内部控制器传递到AngularJs中的外部控制器

3 个答案: