1

在我的应用程序中，我有简单的 angular.js 过滤器，它运行良好，但现在我需要集成服务器端搜索。我有这个端点，我创建了指令，它在输入中监视查询并向服务器返回结果发出请求：

html:

<search ng-model="query"></search>

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);
            });
        }

...

但是，问题在范围内。如您所见，我正在将结果写入父范围项，因为我需要搜索结果与相同的控制器保持在同一页面上（就像在客户端过滤器中一样）：

几个控制器和搜索结果的通用模板：

<ul class="items">
  <li class="item item{{$index+1}}" ng-repeat="item in items">
  ...
  </li>
</ul>

因此，在表示服务器端搜索查询的结果之后，在清除输入字段时，我需要以某种方式返回在搜索之前表示的所有项目，并且目前无法为此找到最佳解决方案..

也许以前有人做过类似的东西？

4

1 回答 1

2

不确定这是否是一个好方法，但我有一个指令列出学生（可选的课程），从工厂获取数据，然后用于$resource获取数据。一直在摆弄它，就像我之前说的那样，不确定这是否是正确的方法。

似乎工作，所以我在这里发布代码。

模板/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()">

指令：

// 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);
              }
            };
          }
        ]);

功能：

//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);
    };
  }
};

工厂（称为 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});
      }
    };
}]);
于 2013-10-10T08:36:44.300 回答