8

そのため、要素のサイズを手動で変更すると、要素のサイズを監視することが機能しないというバグがChromeにあるようです。MutationObserver

バグが修正されるまで、これを Chrome でも機能させるには、代わりに、またはそれに加えて何を使用すればよいですか? 非推奨のミューテーション イベントを使用する必要がありますか、それとも別のより良い代替手段がありますか?

要素オブジェクトを使用せずにAngularJSでこれをうまく行う方法はありますか?

4

4 に答える 4

2

いくつかのレスポンシブ要素を作成しているときに同様の問題に遭遇したため、window.onresize を使用することになりました。

window.onresize = function(){
        //do element changes here
        $scope.$apply();
    };

それがあなたが探しているものかどうかはわかりませんが、このアプローチは私にとってはうまくいきました.

于 2013-12-23T20:10:32.200 に答える
1

私のおすすめは、

まず、高さを監視したい要素にディレクティブを設定します

次に、ディレクティブで、このようにドキュメントで述べたように空のウォッチャーを追加します

If you want to be notified whenever $digest is called, 
you can register a watchExpression function with no listener.(Since 
watchExpression can execute multiple times per $digest cycle when a 
change is detected, be prepared for multiple calls to your listener.)

指令

scope.$watch( function(){
  scope.elHeight = element.height(); // or element.offsetHeight;
};

3番目に、この高さのコントローラーにウォッチャーを設定します

コントローラー

$scope.$watch('elHeight',  function(newVal, oldVal){
  console.log(newVal, oldVal)
};

すべての $digest は、スコープ内のすべての Angular 関連の変更を意味します。

--- 編集 ---
これは、angular-js 関連のイベントのほとんどをカバーしています。ただし、手動のサイズ変更、つまりウィンドウのサイズ変更、バニラ JavaScript のサイズ変更などは対象外です。

AngularJS を使用する場合は、ページ全体で Angular を完全に使用します。したがって、
その場合、$digest が呼び出されるように小さなイベントを発生させます。

于 2013-12-24T08:01:22.247 に答える
1

Angular のスコープでウォッチャーを使用する

$scope.$watch(function() {
  // whatever element you want to watch
  return $element.height();
}, function(newVal, oldVal) {
  // do something
});

私の最善の入札は、要素のサイズを変更するときに、ページで角度を完全に使用する場合、別のダイジェスト サイクル内で行われる可能性が高いということです。$scope.$apply()要素またはウィンドウのサイズを手動で変更するときに、消化を手動でトリガーできることを修正します。

// example to manual trigger digest with $apply()
app.run(function($window, $rootScope) {
  angular.element($window).on('resize', function() {
    $rootScope.$apply();
  });
});

setTimeout高さを取得するために多くの関数呼び出しが無駄になるため、これは よりも優れています。状態が変化する可能性がある場合にのみ取得します。また、これはブラウザー全体で使用する場合よりも信頼性が高くMutationObserverなります。MutationEventsさらに、要素の寸法を監視するMutationObserverとは信じていません。MutationEvents

于 2013-12-23T20:24:16.377 に答える