拨动这里:http://jsfiddle.net/graphicsxp/QA4Fa/2/
我正在尝试创建一个搜索指令。基本上它只是一个检测用户输入的文本框,延迟1秒后,调用一个搜索方法。
它还不能工作,我有两个问题。
首先,当用户输入文本时,为什么没有在span中更新filterCriteria ?
第二,对filterCriteria的监视在页面加载时触发,而不是在文本框中输入文本时触发。
<div ng-app="myApp" ng-controller="myController">
<delayed-search ng-model="filterCriteria"></delayed-search>
<span>filter criteria is : {{filterCriteria}}</span>
</div>
angular.module('myApp', []).directive("delayedSearch", ['$timeout', function($timeout) {
return {
restrict: "E",
template: '<input type="text" />',
scope: {
filterCriteria : '='
},
link: function (scope, element, attrs) {
},
controller: function ($scope) {
var timer = false;
$scope.$watch('filterCriteria', function () {
if (timer) {
$timeout.cancel(timer);
}
timer = $timeout(function () {
alert('timeout expired');
}, 1000)
});
}
}
}]).controller('myController', function($scope){ });
You should NOT use a controller with a directive ( until you understand it ! ) .
指令中的控制器用于指令与指令之间的通信(我希望他们给它起个别的名字!)
@Langdon说对了…但这里是同样的另一个实现。注意,在这两个答案中都缺少控制器。
http://jsfiddle.net/QA4Fa/4/首先,当用户输入文本时,为什么没有在span中更新filterCriteria ?
你的范围是错误的,它应该是scope: { ngModel : '=' },
,你的模板应该是template: '<input type="text" ng-model="ngModel" />
。
第二,对filterCriteria的监视在页面加载时触发,而不是在文本框中输入文本时触发。
和第一个问题一样,你应该监视ngModel
。
同样,您不需要控制器的开销,您可以只使用link函数。这是一个更新的小提琴:http://jsfiddle.net/QA4Fa/3/