Question

我希望我的模态对话框在条纹检查在其上方打开时变得模糊，但由于某种原因，即使我关闭了辅助模式后它仍然模糊不清。

最好在示例plunkr

中试用

使用卡“ 4242 4242 4242 4242 ”进行测试，以及任何未来的到期日和CCV。条纹窗口关闭后，模糊必须消失，但不是出于某种原因。

这是所有基本的东西，我现在已经使用角度至少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',
      });

  };

});

Answer 1

我认为$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已成为角度服务）。

理解{{1}信息的角度方式至关重要。简单地说，每当调用异步非角度服务的回调时，[回调必须使用$digest $ scope`变量。

为什么AngularJS会忽略$ scope字段更改？

1 个答案: