为什么 AngularJS 忽略 $scope 字段变化?
Why does AngularJS ignore $scope field change?
当 Stripe Checkout 在其上方打开时,我希望模态对话框模糊,但出于某种原因,即使在我关闭辅助模态后它仍然模糊。
最好在样本中尝试plunkr
使用卡“4242 4242 4242 4242”进行测试,任何未来到期日和CCV。条纹 window 关闭后模糊必须消失,但由于某些原因它不会消失。
这些都是基本的东西,我已经使用 angular 至少 3 年了,只是这次不知道错误在哪里。
这是上述示例的 JS 代码:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
});
};
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
// Text is not blurred by default.
$scope.isbusy = false;
console.log('dlg scope is ', $scope.$id);
$scope.pay = function () {
// Blur the parent dialog.
$scope.isbusy = true;
console.log($scope.$id, ' marked as busy');
var handler = StripeCheckout.configure({
key: 'pk_test_hh0HjBRRI5Ak793gMgLEZEVN',
token: function(token) {
// Remove blur effect.
$scope.isbusy = false;
console.log($scope.$id, ' marked as NOT busy');
},
closed: function() {
// Remove blur effect even if user clicks close.
$scope.isbusy = false;
console.log($scope.$id, ' marked as NOT busy');
}
});
handler.open({
name: 'Enter Your Card Details',
email: 'foo@mail.com',
});
};
});
我假设 $scope.isbusy
没有按预期变化?条带回调不通知 Angular:
StripeCheckout.configure({
// ...
token: function(token) {
// use scope apply to notify angular:
$scope.$apply(function() {
$scope.isbusy = false;
});
console.log($scope.$id, ' marked as NOT busy');
}
// ...
AngularJS 无法知道 $scope
变量已更改(除非 StripeCheckout
已经是 angular 服务)。
了解 angular $digest
获取信息的方式至关重要。简而言之,每当调用来自异步非 angular 服务的回调时,[回调必须使用 $scope.apply][1] if it changes the state of
$scope` 变量。
当 Stripe Checkout 在其上方打开时,我希望模态对话框模糊,但出于某种原因,即使在我关闭辅助模态后它仍然模糊。
最好在样本中尝试plunkr
使用卡“4242 4242 4242 4242”进行测试,任何未来到期日和CCV。条纹 window 关闭后模糊必须消失,但由于某些原因它不会消失。
这些都是基本的东西,我已经使用 angular 至少 3 年了,只是这次不知道错误在哪里。
这是上述示例的 JS 代码:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
});
};
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
// Text is not blurred by default.
$scope.isbusy = false;
console.log('dlg scope is ', $scope.$id);
$scope.pay = function () {
// Blur the parent dialog.
$scope.isbusy = true;
console.log($scope.$id, ' marked as busy');
var handler = StripeCheckout.configure({
key: 'pk_test_hh0HjBRRI5Ak793gMgLEZEVN',
token: function(token) {
// Remove blur effect.
$scope.isbusy = false;
console.log($scope.$id, ' marked as NOT busy');
},
closed: function() {
// Remove blur effect even if user clicks close.
$scope.isbusy = false;
console.log($scope.$id, ' marked as NOT busy');
}
});
handler.open({
name: 'Enter Your Card Details',
email: 'foo@mail.com',
});
};
});
我假设 $scope.isbusy
没有按预期变化?条带回调不通知 Angular:
StripeCheckout.configure({
// ...
token: function(token) {
// use scope apply to notify angular:
$scope.$apply(function() {
$scope.isbusy = false;
});
console.log($scope.$id, ' marked as NOT busy');
}
// ...
AngularJS 无法知道 $scope
变量已更改(除非 StripeCheckout
已经是 angular 服务)。
了解 angular $digest
获取信息的方式至关重要。简而言之,每当调用来自异步非 angular 服务的回调时,[回调必须使用 $scope.apply][1] if it changes the state of
$scope` 变量。