[英]Angular.js and server-side search - how to, best practices
In my app I had simple angular.js filter and it worked fine, but now I need to integrate server-side search. 在我的应用程序中,我有一个简单的angular.js过滤器,它运行良好,但是现在我需要集成服务器端搜索。 I have endpoint for this and I created directive which watches query in input and makes request to server returning results:
我为此设置了端点,并创建了指令,该指令监视输入中的查询并向服务器返回结果请求:
html: HTML:
<search ng-model="query"></search>
js: JS:
...
restrict: 'E',
scope: {
ngModel: '='
},
template: '<input type="text" ng-model="ngModel" />',
link: function (scope, elem, attrs) {
var timer = false;
scope.$watch('ngModel', function (value) {
if (timer) {
$timeout.cancel(timer);
}
timer = $timeout(function () {
if (value) {
scope.$parent.items = rest.query({ resource: 'search', query: value });
}
}, 1000);
});
}
...
However the problem is in scope . 但是,问题在于范围 。 As you see I'm writing results to parent scope items because I need the search results stay on the same page with same controller (as it was like in client-side filter):
如您所见,我正在将结果写入父范围项,因为我需要搜索结果保持在同一控制器的同一页面上(就像在客户端过滤器中一样):
common template for several controllers and search results: 几个控制器和搜索结果的通用模板:
<ul class="items">
<li class="item item{{$index+1}}" ng-repeat="item in items">
...
</li>
</ul>
So after representing results of server-side search query, when clearing input field I need somehow to return all items that were represented before search and currently cannot find optimal solution for this.. 因此,在表示服务器端搜索查询的结果之后,在清除输入字段时,我需要以某种方式返回搜索之前表示的所有项目,并且目前无法为此找到最佳解决方案。
Maybe someone made something similar before? 也许有人之前做了类似的事情?
Not sure if this is a good way to do it but I've got a directive listing students (optionally for a course) that gets data from a factory that in turn uses $resource
to fetch data. 不知道这是否是一个好方法,但是我有一个指令列出学生(可以选择修读一门课程),该指令从工厂获取数据,而工厂又使用
$resource
来获取数据。 Was fiddling around with it and like I say before not sure if this is the right way either. 摆弄着它,就像我之前说过的,不确定这是否是正确的方法。
Seems to work so I post the code here. 似乎可以正常工作,所以我在这里发布了代码。
The template /partials/v001/student-course-list.html
: 模板
/partials/v001/student-course-list.html
:
Search: <input data-ng-model="query" data-ng-change="search()"/>
Only for this course <input type="checkbox" name="courseid"
data-ng-model="courseid" data-ng-change="search()">
The directive: 指令:
// list students (optional for course) both students and course
// are initially set outside and passed through
angular.module('student').directive('studentCourseList',
['dataProvider',
function(dataProvider) {
return {
restrict: 'A',
//static in GAE so will be cached for a year
// need versioning
templateUrl: '/partials/v001/student-course-list.html',
scope: {
course: '=',
students: '='
},
link: function(scope, elem, attrs) {
scope.search = functions.searchStudentsByName(
dataProvider, scope);
}
};
}
]);
The function: 功能:
//Containing controllers/directives DOM event handlers
// Like ng-change for the search box and isInCourse checkbox
var functions = {
searchStudentsByName: function(dataProvider, scope) {
return function() {
//half a second delay before starting search
// user may be typing several characters
clearTimeout(scope.timeoutId);
scope.timeoutId = setTimeout(function() {
var sId=(scope.courseid)?scope.course.id:false,
q=(scope.query)?scope.query:"";
//can check q again if len<2 set it to ""
// this because isInCourse may have triggered this
scope.students=dataProvider.searchStudentsByName(
scope.query, sId);
}, 500);
};
}
};
The factory (called dataProvider), used $q before to return a promise and resolve it but it seems that with $resource you can just return the $resource and data will bind when a result is returned. 工厂(称为dataProvider)在返回承诺并解决承诺之前使用$ q,但是似乎使用$ resource可以仅返回$ resource,并且返回结果时数据将绑定。
angular.module('dataProvider', []).
factory('dataProvider', ['$resource','$q',function($resource,$q) {
//Anything having /app/student/ goes to google app server
// prefer to just add getstring on the url
var StudentFromApp = $resource('/app/student/',
{}
);
return {
//course id is optional in case only student for course
searchStudentsByName:function(sName,cid){
return StudentFromApp.query(
{courseid:cid,studentName:sName});
}
};
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.