代码之家  ›  专栏  ›  技术社区  ›  Boycott Russia

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

  •  1
  • Boycott Russia  · 技术社区  · 10 年前

    我希望当Stripe Checkout在其上方打开时,模式对话框变得模糊,但由于某种原因,即使在我关闭了第二模式后,它仍然保持模糊。

    最好在 样品 plunkr

    使用卡“ 4242 4242 4242 4242 “要测试,任何未来的到期日期和CCV。模糊必须在条纹窗口关闭后消失,但由于某些原因,它不会消失。”。

    这是所有基本的东西,我已经使用angular至少3年了,只是这次无法弄清楚bug在哪里。

    以下是上述示例中的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',
          });
    
      };
    
    });
    
    1 回复  |  直到 10 年前
        1
  •  2
  •   mnemosyn    10 年前

    我想 $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的方式至关重要 $digest ing信息。简单地说,每当调用异步非角度服务的回调时,〔callback必须使用 $scope.apply][1] if it changes the state of $scope`变量。