0

Angular 1.2.x アプリで SmartTable を使用しています。具体的には、述語のリストが検索プロセスを駆動するパターンに従っています。この具体的な例は、プロジェクト サイトのこちらにあります。

例から、述語を選択して検索を実行し、リストで別の述語を選択すると、テキストボックスには以前の検索基準が含まれていることがわかります。

私はAngularJSを初めて使用し、AngularJSの方法で、述語選択ボックスの変更イベントで検索結果をクリアしようとしています。私が最初に考えたのは、あらゆる種類の DOM 操作をディレクティブの背後にプッシュすることでした。そこで、検索条件をリセットするための呼び出し "tndResetSearch" を作成しました。私の翡翠の構文はかなり乱雑に思えます...これを整理するためのより良い方法があれば、アドバイスを歓迎します;):

select.form-control.tnd-reset-search(name="selectedPredicate", type="text" ng-model="selectedPredicate",
  ng-options="predicate.PredicateId as predicate.PredicateName for predicate in predicates",
  itemdata="predicate", options="#serviceLogSearchBox", resetsearch="resetSearch()")

resetsearch="resetSearch()"私のディレクティブのisolateスコーププロパティにバインドされています。

その実装はコントローラーにあり、モデルを から単純にクリアし$scope、ビューにデータを入力するためにスマート テーブルで使用されるコレクションを再入力します。

$scope.resetSearch = function() {
  delete $scope.searchQuery;
  $scope.initCollection();
}

$scope.initCollection = function() {
  $scope.serviceLogCollection = '';
  $scope.serviceLogCollection = [].concat($scope.originalServiceLogCollection);
};

これは問題なく実行されますが、選択ボックスの述語を変更するたびに、以前の検索基準がキャッシュされ、現在の検索基準に追加されているように見えます。したがって、前の検索のサブセットになります。キャッシュがどこで行われているのかわかりません。$scope次の検索の前に、SmartTable 検索ディレクティブが参照する何かが にある必要があります。私のアプローチが完全に間違っている場合を除き、次に SmartTable を調べて、これを追跡できるかどうかを確認する必要があります。

上記options="#serviceLogSearchBox"のselectボックスは、関連する検索ボックスへの参照を取得して手動でクリアしようとする別の試みでしたが、まったく効果がありませんでした。

ディレクティブでの私の最初のショットは次のとおりです。

angular.module('app').directive('tndResetSearch', [function() {
    return {
        restrict: 'CA',
        replace: false,
        transclude: false,
        scope: {
            index: '=index',
            predicate: '=itemdata',
            resetSearch: '&resetsearch'
        },
        link: function(scope, elem, attrs) {

            var maxNukes=100, currentNuke=0, triggerKeyDown, nukeSearch;

            triggerKeyDown = function (element, keyCode) {
              var e = angular.element.Event('keydown');
              e.which = keyCode;
              element.trigger(e);
            };

            nukeSearch = function() {
                // Trigger keydown event for bound element that uses the stSearch directive???
                // This never actually does anything, It just loops forever.
                //
                // var target = angular.element(attrs.options);
                // while (target.val().length > 0 && currentNuke < maxNukes) {
                //    triggerKeyDown(target, 8); //backspace=8
                //    currentNuke++;
                //}
                // Call referenced function on isolate scope
                scope.resetSearch();
            };

            // Modify the DOM the first time the view renders with the first item selected
            if (parseInt(scope.index)===0) {
                nukeSearch();
            }

            elem.bind('change', function (evt) {
                nukeSearch();
            });

        }
    }
}]);

なぜ私が言及した動作が見られるのか、誰かが知っていますか?これについて間違った方法で行っていますか? もしそうなら、Angular 1.2.x と SmartTable を使用する最善のアプローチは何ですか?

4

1 に答える 1

0

さて、tndResetSearch上記のディレクティブ ディレクティブを次のように単純化しました。

angular.module('app').directive('tndResetSearch', ['$parse', function($parse) {
    return {
        require: '^stTable',
        restrict: 'CA',
        link: function(scope, elem, attrs, ctrl) {

            var tableCtrl = ctrl,
                fn = $parse(attrs['resetSearch']);

            nukeSearch = function(evt) {
                scope.$apply(function() {
                    fn(scope, {
                        $event: evt
                    })
                });
            };

            elem.bind('change', function (evt) {
                nukeSearch(evt);
            });

        }
    }
}]);

...そして、これを行う代わりに:

$scope.resetSearch = function() {
  delete $scope.searchQuery;
  $scope.initCollection();
}

私はこれをやった、それは動作します：

$scope.resetSearch = function(evt) {
  $scope.initCollection();
  $scope.searchQuery = ' ';
}

searchQuery私のng-model検索入力ボックスです。空の文字列、null、または未定義で何でもあるようです。それ以外の場合、stSearch ディレクティブは変更を認識せず、以前の検索値がまだ存在していると想定します。

ここで価値があるのは、私の検索テキストボックスです（翡翠で）：

input.form-control(id="serviceLogSearchBox", 
  st-search="{{selectedPredicate}}", placeholder="Search", 
  type="search", ng-model="searchQuery")
于 2015-08-02T21:32:56.493 に答える