AngularJS element.bind（ 'resize'）$ scope変数を更新しない

Question

ブラウザウィンドウのinnerWidthのスコープ変数を以下のコードを使用して設定しようとしています。これはコンソールで見たときに機能しますが、関数は$ scope変数を更新していません。どうして？

angular.element($window).bind('resize', function() { 
    console.log('resize', $window.innerWidth); // I can see change here 
    $scope.window_width = $window.innnerWidth; // no change here 
}); 

Answer 1

ダイジェスト角度を強制する必要がありますここで$digestサイクルを起動します。それ以外の場合は、変更があることを角度で知らせません。

angular.element($window).bind('resize', function() { 
    console.log('resize', $window.innerWidth); 
    $scope.window_width = $window.innerWidth; 
    $scope.$evalAsync(); 
}); 

$scope.$evalAsync()あなたが質問を入力するとき、それはかもしれ愚かな間違いをした後、$timeout（詳細here）のダニ同じjsのイベント内で発火の大きなチャンスと

Answer 2

これを試してみてください：

$scope.$apply(function() { $scope.window_width = $window.innnerWidth; }) 

あなたはDOMイベントをバインドするので、手動で持っているので、あなたは、角度の外に住んjQliteで何かを結合している相

Answer 3

をダイジェストサイクルを呼び出します。

$scope.window_width = $window.innnerWidth; //innnerWidth should be innerWidth 

とリサイズが何かであるので、あなたが$scope.$digest();を呼び出すことによって、手動でダイジェスト・サイクルを実行するために必要なスコープ変数を更新した後、角度の外で起こるので、我々はスコープに更新するものがあるに角度を指示する必要があります。

$digest()の代わりに何が使えますか？あなたは$timeoutでコードをラップすることができます

1. それはダイジェスト・サイクルをトリガすること自己

   $timeout(function() { $scope.window_width = $window.innerWidth; });

2. 使用$scope.$apply();

   よう

   $scope.window_width = $window.innerWidth; $scope.$apply();

彼re：a demo