Question

在我的应用程序中，我有简单的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> 

所以代表服务器端的搜索查询的结果后，清除输入字段，当我需要以某种方式返回被搜索之前表示，目前无法找到这个最佳的解决方案的所有项目..

也许有人做过类似的事情吗？

Answer 1

不知道这是否是一种好的方法，但我有一个指令，列出了从工厂获取数据的学生（可选择一门课程），该工厂又使用$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); 
    }; 
    } 
}; 

工厂（称为数据提供程序），使用$ Q之前返回一个承诺并解决它，但似乎与$资源，你可以返回$资源和dat a将返回结果时绑定。

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