Question

我有这段代码：

var meme = angular.module('testApp');
meme.controller('awsCtrl', ['$scope', function ($scope) {
    $scope.myDate = 'Hello there!';
    $scope.testSend1Response = '';
    //-----
    //--set up configuration for AWS
    //-----
    var credentials = new AWS.Credentials('AKIAI4UYCXVJ2FJICSHA', 'Sj42vmNla34trodyrvIcVIkbo+mczVo5QMIlfVHg');
    AWS.config.region = "ap-southeast-2";
    AWS.config.credentials = credentials;
    //-------------------------------------------------------------------------
    //--send message
    //-------------------------------------------------------------------------

    $scope.testSend1 = function() {
      var sqs = new AWS.SQS({apiVersion: '2012-11-05'});
      var params = {
         DelaySeconds: 10,
         MessageAttributes: {
          "Title": {
            DataType: "String",
            StringValue: "The Whistler"
           },

          "Author": {
            DataType: "String",
            StringValue: "John Grisham"
           },

          "WeeksOn": {
            DataType: "Number",
            StringValue: "6"
           }
         },

         MessageBody: "Information about current NY Times fiction bestseller for week of 12/11/2016.",

         QueueUrl: 'https://sqs.ap-southeast-2.amazonaws.com/448283262740/reporting'

        };

      sqs.sendMessage(params, function(err, data) {
        if (err) {
          console.log("Error", err);
        } else {
          $scope.testSend1Response = '  Success.  MessageId: ' + data.MessageId; // << THE PROBLEM IS HERE
          console.log("Success", $scope.testSend1Response);
          console.log('Success2 ' + data.MessageId);
        }
      });
    }
  }]);

在这方面：

      sqs.sendMessage(params, function(err, data) {
        if (err) {
          console.log("Error", err);
        } else {
          $scope.testSend1Response = '  Success.  MessageId: ' + data.MessageId; // << THE PROBLEM IS HERE
          console.log("Success", $scope.testSend1Response);
          console.log('Success2 ' + data.MessageId);
        }
      });

我正在使用AWS sqs发送消息，然后记录已发送的消息，并为范围变量testSend1Response分配MessageId。

在我的HTML中，我有：

<button ng-click="testSend1()"> Send data </button>
<span> Response: {{testSend1Response}}</span>

当我点击按钮时，响应不会打印在我希望打印的HTML中，但在控制台日志中我可以看到一条说1aacc的MessageId当我第二次点击按钮时，1aacc以HTML格式打印，但在控制台日志中我可以看到2bbdd的MessageId，所以似乎$scope.testSend1Response落后于记录并向我显示以前的MessageId而不是当前的MessageId。

Answer 1

发生这种情况的原因是因为Angular没有消化＆＃34;这个改变，这意味着Angular并不知道这个变量会在那个区域发生变化，所以当函数运行完毕时，Angular已经完成了它的消化循环，现在设置了范围变量$scope.testSend1Response但是Angular并不知道它或者没有认识到它。

如果在javascript超时函数中更改范围变量，也会发生同样的事情。然而，异步角度服务，例如$http被包装并且默认情况下被角度消化。

解决该问题的方法是将该变量包装在$apply函数中，如下所示：

  sqs.sendMessage(params, function(err, data) {
    if (err) {
      console.log("Error", err);
    } else {
      $scope.$apply(function() {
          $scope.testSend1Response = '  Success.  MessageId: ' + data.MessageId;
      });
      console.log("Success", $scope.testSend1Response);
      console.log('Success2 ' + data.MessageId);
    }
  });

我的$ scope.variable正在改变，但它没有出现在HTML上（$ scope。$ apply）

1 个答案: