I'm trying to use the modal directive from Angular Bootstrap to pop up a dialog, change a value (that was passed in) and then retrieve it.
我正在尝试使用角引导中的模态指令弹出一个对话框,更改一个值(已传入),然后检索它。
However, for some reason the value never gets updated in the scope. And, in fact, if I put in a "ng-change" and stick a breakpoint in it, it seems that there's another level of scope being created for some reason.
但是,由于某些原因,该值永远不会在范围内更新。事实上,如果我输入一个“ng-change”并在其中插入一个断点,那么由于某种原因,似乎还有另一个级别的范围被创建。
I've created a plunker here: http://plnkr.co/edit/Vy6gLgOJbWcLsHJtaGpV?p=preview
我在这里创建了一个柱塞器:http://plnkr.co/edit/vy6glgojbwclshjtagpv?
I'm baffled by this. Any ideas?
我被困惑。什么好主意吗?
1 个解决方案
#1
18
Javascript passes primitives (such as integer) by value. So when you return an integer from the resolve function, or accept it as a function argument, you're using a copy of the original integer. So then changing it (as you do in the popup) will have no effect on the original.
Javascript通过值传递原语(比如integer)。因此,当您从解析函数返回一个整数,或者接受它作为函数参数时,您使用的是原始整数的副本。然后改变它(正如你在弹出窗口中所做的那样)将不会对原始文件产生影响。
A solution to this is to use an object, and pass that around. e.g. instead of an integer 'hour', use an object time:
解决这个问题的方法是使用一个对象,并传递它。例如,使用对象时间而不是整数“小时”:
$scope.time = {
hour: 12
};
and make sure you use it in the resolve object:
并确保在解析对象中使用它:
resolve : {
time : function() {
return $scope.time;
}
}
You can see this at http://plnkr.co/edit/8YQGTn79AO4X7Tb7ann7?p=preview
您可以在http://plnkr.co/edit/8yqgtn79ao4x7tb7ann7?
Edit : Extracted from the plnkr
编辑:从plnkr中提取
var testApp = angular.module('testApp', ['ui.bootstrap' ]);
testApp.controller('UserDataCtrl',function ($scope, $modal) {
$scope.time = {
hour: 12
};
$scope.showPopup = function() {
$modal.open({
templateUrl : 'popup.html',
controller : PopupCtrl,
resolve : {
time : function() {
return $scope.time;
}
}
}).result.then(function(result) {
$scope.hour = result;
});
};
});
var PopupCtrl = function($scope, $modalInstance, $http, time) {
$scope.level="PopupCtrl";
$scope.possibleTimes= [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
$scope.time = time;
$scope.ok = function() {
$modalInstance.close($scope.hour);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
$scope.changing = function(){
var x = 5;
};
};
#1
18
Javascript passes primitives (such as integer) by value. So when you return an integer from the resolve function, or accept it as a function argument, you're using a copy of the original integer. So then changing it (as you do in the popup) will have no effect on the original.
Javascript通过值传递原语(比如integer)。因此,当您从解析函数返回一个整数,或者接受它作为函数参数时,您使用的是原始整数的副本。然后改变它(正如你在弹出窗口中所做的那样)将不会对原始文件产生影响。
A solution to this is to use an object, and pass that around. e.g. instead of an integer 'hour', use an object time:
解决这个问题的方法是使用一个对象,并传递它。例如,使用对象时间而不是整数“小时”:
$scope.time = {
hour: 12
};
and make sure you use it in the resolve object:
并确保在解析对象中使用它:
resolve : {
time : function() {
return $scope.time;
}
}
You can see this at http://plnkr.co/edit/8YQGTn79AO4X7Tb7ann7?p=preview
您可以在http://plnkr.co/edit/8yqgtn79ao4x7tb7ann7?
Edit : Extracted from the plnkr
编辑:从plnkr中提取
var testApp = angular.module('testApp', ['ui.bootstrap' ]);
testApp.controller('UserDataCtrl',function ($scope, $modal) {
$scope.time = {
hour: 12
};
$scope.showPopup = function() {
$modal.open({
templateUrl : 'popup.html',
controller : PopupCtrl,
resolve : {
time : function() {
return $scope.time;
}
}
}).result.then(function(result) {
$scope.hour = result;
});
};
});
var PopupCtrl = function($scope, $modalInstance, $http, time) {
$scope.level="PopupCtrl";
$scope.possibleTimes= [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
$scope.time = time;
$scope.ok = function() {
$modalInstance.close($scope.hour);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
$scope.changing = function(){
var x = 5;
};
};