1

背景:
エラー/情報メッセージの変化に応じてサイズが変化するフォーカスに表示されるヒント ボックスがあります。たとえば、ぼかしの場合、ボックスは残りますが、フィールドの検証が失敗した場合はエラー メッセージを追加します。次に、ユーザーが入力を開始すると、エラーメッセージが消えます。この動作はすべて ng-show で制御されます。たとえば、エラー メッセージは ng-show="hasError" の div にあります。したがって、コントローラーが hasError を true に設定すると、ボックスにエラーが表示され、ヒント ボックスの高さが変わります。

目標:
ボックスのオフセットの高さに応じて、ボックスを動的に (垂直方向に) 再センタリングしたい。これは、要素の margin-bottom をリセットすることによるものです。

問題:
angular のディレクティブ ng-show によって高さが本質的に変化するため、適切なタイミングでチップ ボックスの高さを再計算するのに、良い意味で苦労しています。

エラーが検出されたときに呼び出される handleError などのハンドラーを追加できます。次のようになります。

scope.handleError = function () {
    scope.hasError = true;
    $timeout(resetHeight, 30); 
};

ただし、タイムアウト コードがないと、エラーが追加される前にサイズ変更が行われ、margin-bottom の値が台無しになります。このようなタイムアウトを使用するのは、ハッキーに感じられ、ユーザーが実際に速度低下を経験した場合に失敗するため、あまり快適ではありません。

$watch も次のように使用してみました。

scope.$watch('hasError', resetHeight, true);

これはまた、エラーが再び表示される前に発生するようで、margin-bottom が台無しになり、表示が中心から外れます。

問題は、Angular で、ディレクティブ、具体的には ng-show の後に何らかのロジックを実行させる方法があるかということです。$watch のように、特定の使用法を関連付けることはできますか?

ありがとう、

4

1 に答える 1

1

いろいろなことができますが、独自のディレクティブを作成するのが最も簡潔で効果的な選択だと思います。次に例を示します。

app.directive('showResize', function() {
  return {
    link: function(scope, element, attrs) {
      element.hide();
      var height = 50;
      scope.$watch(attrs.showResize, function(shouldShow) {
        if (shouldShow) {
          console.log('ran');
          element.show(); 
          height = height+50;
          console.log(height);
          element.css('height', height+'px');       
        }
        else { element.hide(); }
      });
    }
  };
});

これにより、表示/非表示とサイズ変更の順序を制御できるため、まったく必要ありませんng-show。

ライブ デモはこちら (クリック)。

于 2013-09-12T07:09:27.010 に答える