Очистить связанное текстовое поле SmartTable с помощью AngularJS

Я использую SmartTable с приложением Angular 1.2.x. В частности, я следую шаблону, в котором список предикатов управляет процессом поиска. Конкретный пример этого приведен на сайте проекта здесь.

Из примера видно, что когда вы выбираете предикат и выполняете поиск, а затем выбираете другой предикат в списке, текстовое поле по-прежнему содержит предыдущие критерии поиска.

Я новичок в 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()" привязан к свойству области изоляции моей директивы.

Реализация этого находится в контроллере, который просто очищает модель от $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?


angularjs pug smart-table
person Rai    schedule 02.08.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ну, я упростил директиву 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 или undefined. В противном случае директива stSearch не видит изменений и предполагает, что предыдущее значение поиска все еще присутствует.

Для чего это стоит, вот мое текстовое поле поиска (в нефрите):

input.form-control(id="serviceLogSearchBox", 
  st-search="{{selectedPredicate}}", placeholder="Search", 
  type="search", ng-model="searchQuery")
person Rai    schedule 02.08.2015