传递多个参数 UI Bootstrap 模态 Window Angular JS 不工作

Question

我正在尝试使用 AngularJS 和 UI Bootstrap 将 4 个变量传入和传出模态 window。不幸的是，当我从模态 window 取回参数时，只有 1 个参数出现 - 其余所有 return 为 'undefined'！

到代码：

这里是我打开 $modal 服务，并传递 4 个参数的地方：

$scope.open = function() {

    var modalInstance = $modal.open({
        templateUrl: 'modal.html',
        controller: 'ModalController',
        resolve: {
            var1: function() { return $scope.var1; },
            var2: function() { return $scope.var2; },
            var3: function() { return $scope.var3; },
            var4: function() { return $scope.var4; }
        }
    });

这些像这样注入到 ModalController 中：

var ModalController = function($scope, $modalInstance, var1, var2, var3, var4) {

在 ModalController 中，我可以很好地查看和使用这些变量。

然后我 return 通过关闭模式 window 将它们发送到父控制器，如下所示：

var ok = function() {
    $modalInstance.close($scope.var1, $scope.var2, $scope.var3, $scope.var4);
};

当父控制器接收回这些值时，问题就变得很清楚了——它似乎只传递了第一个参数 var1。其他的都未定义！

modalInstance.result.then(function (var1, var2, var3, var4) {
    $scope.var1 = var1;
    $scope.var2 = var2;
    $scope.var3 = var3;
    $scope.var4 = var4;
}, function () {
    console.log("Modal dismissed at: " + new Date());
});

现在，我在 UI Bootstrap 文档中看到 "close" 函数需要一个 promise。我是 Angular 和 Javascript 的新手，不太明白为什么 1 个变量起作用，而不是多个变量？我假设我的结构不正确......我真的不明白 resolve 的工作原理，所以我确定我在做一些非常愚蠢的事情。

有什么想法吗？

Answer 1

return 一个 JSON 对象，例如：

$modalInstance.close({'var1':$scope.var1, 'var2':$scope.var2, 'var3':$scope.var3, 'var4':$scope.var4});

和

modalInstance.result.then(function (result) {
  console.log(result);
  $scope.var1 = result.var1;
      .....
}

Answer 2

如果您查看 .then() 的签名，您会注意到它不会发送未知数量的参数，而是发送非常具体的参数。第一个参数是您的数据。因此，发送一个代表所有数据的对象而不是将其分解。

var ok = function() {
    var data = {
        var1: $scope.var1, 
        var2: $scope.var2, 
        var3: $scope.var3, 
        var4: $scope.var4
    };
    $modalInstance.close(data);
};

modalInstance.result.then(function (data) {
    $scope.var1 = data.var1;
    $scope.var2 = data.var2;
    $scope.var3 = data.var3;
    $scope.var4 = data.var4;
}, function () {
    console.log("Modal dismissed at: " + new Date());
});

传递多个参数 UI Bootstrap 模态 Window Angular JS 不工作

Passing multiple parameters UI Bootstrap Modal Window Angular JS not working

javascript

angularjs

angular-ui-bootstrap