私の$ scope.variableが変化しているが、それはHTMLに来ていない

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); 
     } 
     }); 

を私が使用していますメッセージを送信し、メッセージが送信されたことを記録し、スコープ変数testSend1ResponseをMessageIdに割り当てるにはAWS sqs。

私が持っている私のHTMLで

：

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

ボタンIをクリックすると、応答は、私はそれが印刷され得ることを期待していますHTMLで印刷されませんが、コンソールログに私ができます例えば1aaccのMessageIdを見てください.2回目のボタンをクリックすると、1aaccがHTML形式で表示されますが、コンソールログには2bbddのMessageIdが表示されるので、$scope.testSend1Responseがログの後ろに表示されています現在のメッセージIDの代わりに前のMessageId

Answer 1

これは、Angularがこの変更を "消化していない"ため、Angularは、この変数がその領域で変更されることを知らなかったためです。消化ループを終了しましたが、スコープ変数$scope.testSend1Responseが設定されましたが、Angularはそのことについて認識していないか、認識できませんでした。

javascriptタイムアウト関数内でスコープ変数を変更する場合も同じことが起こります。 ただし、$httpのような非同期角度サービスはラップされ、デフォルトでは角で消化されます。

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); 
    } 
    });