角型JSでの2方向の結合

コードをフォローすると問題が発生します。角型JSでの2方向の結合

私のhtmlページのコード：

<body ng-app="myapp"> 

    <div ng-controller="myController"> 
    The message is {{message}} 
     <input type="button" value="Change Message" ng-click="changeMessage()"> 

    </div>

マイコントローラーコード：

app.controller('myController',function($scope) 
{    
$scope.changeMessage=function() 
    { 
     setTimeout(function(){ 
     console.log("Message changed"); 
     $scope.message="Hurray !!! New Message";  

     },3000); 

$scope.newMessage=function() 
     { 
      $scope.message="hello"; 
      console.log("new message"); 
     };

しかし、私はchangeMessage機能を使用する場合、私はさえにconsole.logメッセージかかわらず、変更されたメッセージのプロパティを参照することはできませんよ来る。どちらの場合でもここには何が欠けていますか？タイムアウトが実行されることを後

あなたは$（ダイジェスト使用する必要があり、事前

出典

2016-03-20 user2779311

を変更がビューに反映されていないという理由は、割り当ての変更に気付いていない角度になりsetTimeoutでコールバックで行われていることです。これは、いわゆるdigestサイクルと関係がある。これを解決する方法はいくつかあります。あなたの割り当て

またはより良い角度の代わりに、すでにあなたのために、上記の問題を扱うsetTimeoutへの呼び出しが提供する既存の$timeoutサービスを使用するラップする

使用$scope.$apply()。詳細について

、$適用の背後にある理由のために$タイムアウト

とhttps://docs.angularjs.org/api/ng/type/$rootScope.Scopeの使用のためのhttps://docs.angularjs.org/api/ng/service/$timeoutを参照してください。

ここで起こっていることの一般的な説明は、http://www.sitepoint.com/understanding-angulars-apply-digest/

出典

2016-03-20 12:15:50

のおかげで）：

$scope.changeMessage=function() 
{ 
    setTimeout(function(){ 
    $scope.message="Hurray !!! New Message"; 
    $scope.$digest(); 
    },3000); 
}

パフォーマンス関連（ダイジェストの代わりに、$適用$を使用することがはるかに優れていることに注意してください）：

スコープ。$ digest（）は、現在のスコープとそのすべての子のウォッチャーを起動します。 $ applyは、渡された関数を評価し、$ rootScopeを実行します。$ digest（）

出典

2016-03-20 12:13:43

すべての変更は角度ダイジェストサイクル内で行われます。外側から値を変更した場合（正確には角度の$timeoutの代わりにsetTimeoutを使用した場合）、angleは次のダイジェストサイクル（https://www.ng-book.com/p/The-Digest-Loop-and-apply/）までビューを更新しません。あなたのケースではmessageはすでに設定されていますが、ビューは更新されていません。

はこのような何かしてみてください：

app.controller('myController', function($scope, $timeout) { 
    $scope.changeMessage = function() { 
    $timeout(function(){ 
     console.log("Message changed"); 
     $scope.message="Hurray !!! New Message";  
    }, 3000); 

    $scope.newMessage=function() { 
    $scope.message="hello"; 
    console.log("new message"); 
    };

出典

2016-03-20 12:15:16 pierrebeitz

答えて

関連する問題