我在Angular 1.2.x应用程序中使用了SmartTable。具体来说，我遵循的是谓词列表驱动搜索过程的模式。具体的示例在此处的项目站点上给出。
从示例中可以看到，当您选择一个谓词并执行搜索，然后在列表中选择另一个谓词时，文本框仍包含先前的搜索条件。
我是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并重新填充智能表用来填充视图的集合：
$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的最佳方法是什么？
好吧，我将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")
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句