当用户按下 esc 键时,我试图清除过滤器的输入字段。一旦我输入指令的标记,过滤器就会完全停止工作。
我的标记如下:
<div ng-app='App'>
<div ng-controller="MyCtrl">
<input type="text" ng-model="itemSearch" clear-input clear="clearFilter()" />
<button ng-click="clearFilter()">Clear</button>
<ul>
<li ng-repeat="item in items|filter:itemSearch"> <span>{{item.value}}</span>
</li>
</ul>
</div>
</div>
JavaScript如下:
var app = angular.module('App', []);
function MyCtrl($scope) {
$scope.items = [
{value: 'one two three'},
{value: 'four five six'}
];
$scope.clearFilter = function () {
$scope.itemSearch = '';
};
}
app.directive('clearInput', function () {
function isEscapeKey(keyCode) {
if (keyCode === 27) {
return true;
}
return false;
}
return {
restrict: 'A',
scope: {
clear: '&'
},
link: function (scope, element) {
element.keyup(function (event) {
if (isEscapeKey(event.keyCode)) {
scope.clear();
}
});
}
};
});
我在这里有示例代码:http: //jsfiddle.net/darrenthomas/cbcpq/1/
我想指出,我不是一位经验丰富的 JavaScript 程序员,而且我是 AngularJS 的新手。我还查看了如何将多个属性传递给 Angular.js 属性指令?但我无法获得有效的解决方案。