SignalRを使用してサーバーから返された値にAngularJS式が更新されない

Question

signalRを使用してサーバーに接続するangularjsファイルがあります。これは私のコードです：

<div ng-app="myapp" ng-controller="myctr"> 

     //THE BELOW BUTTON SHOULD CHANGE THE VALUE OF {{testo}} 
     <button ng-click="AggiornaTesto()">Cliccami</button> 

     <input type="text" ng-model="input" /> 

     //THe EXPRESSION BELOW ONLY UPDATES IF I PRESS THE BUTTON "CLICCAMI" TWICE 
     {{testo}} 

     <br /> 
     Stato Connessione: {{statoconnessione}} 
    </div> 
    <script> 
     var app = angular.module("myapp", []); 
     app.controller("myctr", function ($scope) { 
      $scope.testo = ""; 
      $scope.input = ""; 
      $scope.btnenabled = "true"; 
      $scope.statoconnessione = ""; 
      $.connection.myHub1.client.JSMet1 = function (x) { 

       //THE FOLLOWING LINE IS EXECUTED CORRECTLY 
       //BECAUSE IN THE CONSOLE I CAN SEE IT IN THE CONSOLE, 
       //AND THE VALUE OF X IS CORRECT 
       console.log("JSMet1 " + Math.random()+" "+x); 

       //MAYBE ALSO THE FOLLOWING LINE IS EXECUTED BUT THE 
       //EXPRESSION {{testo}} IS UPDATED ONLY IF I PRESS THE BUTTON TWICE 
       $scope.testo = x; 
      }; 
      $scope.AggiornaTesto = function() { 
       console.log("AggiornaTesto " + Math.random()); 
       $.connection.myHub1.server.cSMet1($scope.input); 
      }; 
     }); 
     $.connection.hub.start().done(function() { 
      $.connection.hub.stateChanged = function (stato) { $scope.statoconnessione = stato }; 
     }); 
    </script> 

問題は、{{testo}}という表現が1回だけ更新され、1回だけ更新されるということです。それは私が "cliccami"ボタンを押すたびに更新されるべきです。つまり、ボタン、にリンクされている機能：

$.connection.myHub1.client.JSMet1 = function (x) {....} 

は、私は、コンソールをチェックしているとはconsole.log関数が実行されるので、私はボタンを押すたびに実行されます。しかし、次の行は、

$scope.testo = x; 

は、{{testo}}が変更されないと実行されないようです。

Answer 1

angularJSにはダイジェストサイクルと呼ばれるものがあり、知られているすべての角度のディレクティブに自動的に双方向データバインディングが行われます。あなたのケースでは、あなた自身がダイジェストサイクルを起動しなければならないので、{{testo}}は新しい値に変更されます。そのためには$scope.$apply() ダイジェストサイクルの詳細はこちらhttp://www.sitepoint.com/understanding-angulars-apply-digest/

Answer 2

これは角を認識していないライブラリと角度コードを混在させる場合によくある問題です。あなたが角度以外の何かにコールバック関数を渡すときは、手動で角度ダイジェストループをトリガーする必要があります。

クリーンな方法は、すべてのコールバックコードが$scope.$apply()への呼び出しの内部で起こることを確実にするためである。まさに

$.connection.myHub1.client.JSMet1 = function (x) { 
    $scope.$apply(function() { 
     console.log("JSMet1 " + Math.random()+" "+x); 
     $scope.testo = x; 
    }) 
});