我正在尝试使用AngularJS和UI Bootstrap将4个变量传入和传出模态窗口。不幸的是,当我从模态窗口返回参数时,只显示其中一个参数 - 其余所有参数都返回为'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中,我可以很好地查看和使用这些变量。
然后我通过关闭模态窗口将它们返回到父控制器:
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文档中看到“关闭”函数需要一个承诺。我对Angular和Javascript很新,并不真正理解为什么1个变量有效,而不是多个?我认为我的结构不正确......我真的不明白解决方法是如何工作的,所以我确信我做的事情非常愚蠢。
有什么想法吗?
答案 0 :(得分:5)
返回一个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;
.....
}
答案 1 :(得分: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());
});