3

私はAngularJSを初めて使用し、Jqueryで行っていたことを行うためにいくつかのカスタムAngularディレクティブを作成していますが、「角度のある方法」で行っているかどうかわからない場合が1つあります"。それはうまくいきますが、もっと良い方法があるかもしれないと思います。

私がやりたいのは、検索ボックスのためにこれです：

フォーカスが検索ボックスにある場合、アプリはボックス内のテキストの色を灰色から黒に変更する必要があります。アプリは、ボックス内の現在のテキストもチェックする必要があります。それがデフォルトのテキストである場合、アプリはテキストをクリアする必要があります。

ボックスがフォーカスを失った (ぼかした) 場合、アプリはボックスのテキストを灰色に戻す必要があります。次に、フォーカスを失ったときにテキスト ボックスが空の場合にのみ、既定のテキストを戻す必要があります。

これは、これらすべてを完全に実行するように設定されたディレクティブを持つ jsfiddle です。 http://jsfiddle.net/Rick_KLN/5N73M/2/

しかし、私はそれを行うためのさらに良い方法があると思います。

コントローラー内のこれら 3 つの変数はすべて不要なようです。また、if、else ステートメントが 4 つあるように思えます。フォーカスとブラーのみが使用され、if ステートメントで指定されているため、すべてのイベントへのバインディングはやり過ぎです。

このディレクティブの最適化に関するアイデアはありますか?

4

2 に答える 2

1

探している「デフォルトのテキスト」の動作は、HTML5placeholder属性によって自動的に処理されます。最新のブラウザでサポートされており、CSSを使用して次のようにスタイルを設定できます。

マークアップ：

<input id="searchBar" type="text" placeholder="Search" />

CSS：

#searchBar                                  { color: #858585; }    
#searchBar:focus                            { color: #2c2c2c; }    
#searchBar:focus::-webkit-input-placeholder { color: transparent; }
#searchBar:focus::-moz-placeholder          { color: transparent; }
#searchBar:focus:-moz-placeholder           { color: transparent; }
#searchBar:focus:-ms-input-placeholder      { color: transparent; }

とても簡単です。

ノート：

  • 疑似要素と疑似クラス（-webkit-input-placeholderなど）は、フォーカスのプレースホルダーテキストを非表示にするものです。通常、入力を開始するまでそのままになります。
  • オリジナルのjsFiddleをフォークしました。もはや実際にはAngularJSアプリではありません：http： //jsfiddle.net/Smudge/RR9me/
  • 古いブラウザの場合：上記と同じコードを引き続き使用できますが、属性がサポートされていない場合は、 Modernizr（または同様のもの）を使用してjavascriptのみのアプローチにフォールバックできます。
于 2013-02-28T07:21:22.550 に答える
1

ng-model ディレクティブを必要とするカスタム ディレクティブを作成し、ディレクティブのリンク関数内で、モデルへの参照である 4 番目のパラメーターを指定できます。これにより、モデルの変更を監視し、それに応じて対応することができます。これがフィドルです： http://jsfiddle.net/brettlaforge/6t39j/3/

var app = angular.module('app', []);

app.directive('searchbar', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, model) {

            var options = scope.$eval(attrs.searchbar);
            scope.$watch(attrs.ngModel, function(value) {
                // If the input element is currently focused.
                if (!elm.is(":focus")) {
                    // If the input is empty.
                    if (value === undefined || value === "") {
                        // Set the input to the default. This will not update the controller's model.
                        elm.val(options.default);
                    }
                }
            });

            elm.on('focus', function(event) {
                // If the input is equal to the default, replace it with an empty string.
                if (elm.val() === options.default) {
                    elm.val('');
                }
            });

            elm.on('focusout', function(event) {
                // If the input is empty, replace it with the default.
                if (elm.val() === '') {
                    elm.val(options.default);
                }
            });
        }
    };
});

function FormCtrl($scope) {
    $scope.search = "";
}​
于 2012-10-10T17:05:20.707 に答える