我在Angular 1.2.x应用程序中使用SmartTable。具体来说,我遵循的模式是谓词列表驱动搜索过程。项目网站here上给出了一个具体的例子。
从示例中可以看出,当您选择谓词并执行搜索,然后在列表中选择另一个谓词时,文本框仍然包含以前的搜索条件。
我是AngularJS的新手,我正在尝试以AngularJS的方式清除谓词选择框的change事件的搜索结果。我的第一个想法是在指令后面推送任何类型的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
清除模型并重新填充smart-table使用的集合来填充视图:
$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的最佳方法是什么?
答案 0 :(得分: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或undefined。否则,stSearch指令不会看到更改,并假定先前的搜索值仍然存在。
这里的价值在于我的搜索文本框(在玉中):
input.form-control(id="serviceLogSearchBox",
st-search="{{selectedPredicate}}", placeholder="Search",
type="search", ng-model="searchQuery")