Question

我是angularJS的新手，如果我只使用JQuery，这个任务会非常简单，但我正在努力做到这一点。

基本上，我想要一个文本输入字段，当用户按下搜索（输入内容后），我希望能够通过Ajax使用该值进行搜索，然后在列表中显示返回的记录

我明白为了做到这一点，我需要使用指令吗？

我不是在找人写这篇文章，但请指出我正确的方向，或者只提供一些例子，以便我自己构建。

我的指令（如此）

app.directive('recordSearch', function() {
return {
    restrict: 'E',
    scope: {
        searchInfo: '=info'
    },
    templateUrl: 'partials/record-search.html',
    link: function(scope, element, attr) {

    }
};
});

RECORD-SEARCH.HTML

<label class="item item-input">
<span class="input-label">{{ searchInfo.title }}</span>
<i class="icon ion-search placeholder-icon"></i>
<input type="search">
</label>

在我的实际页面上

<record-search info="company"></record-search>

Answer 1

由于您计划重复使用该元素，因此指令确实有意义。

根据您所描述的内容，我想它可以这样组织：

directive('mySearch', function(Item){
  return {
    restrict: 'E',
    // if you want to show results somewhere outside of the directive, you need
    // to set a two-way binding variable to pass up the scope chain
    scope: {},
    link: function(scope, elem, attrs) {
      scope.search = function(query){
        Item.search(query).then(function(results){
          scope.results = results.data;
        });
      };
    },
    // template contains search button.. could also contain ng-repeat for
    // results -- it depends on how/where you want to display the results
    templateUrl: 'my-template.html' 
  }
})
.factory('Item', function($http){  
  var item = {};

  // this factory manages your item data in general, including searches
  item.search = function(query){
    // perform ajax search w/ $http
  };

  return item;
})

...但您的里程可能会根据您尝试完成的内容而有所不同。一般来说，除了使用可重用组件的指令外，还应该使用服务来处理数据（包括AJAX查询）。

Answer 2

一种方法：

1 - 对于ajax调用，您实际上并不需要指令。您应该在控制器中使用$ http或$ resource模块进行ajax调用，或者更好，在一个单独的工厂中。然后，您将在输入标记中使用ng-click指令，该指令将调用您的搜索功能并传递您的搜索数据。

2 - 要显示数据，您可以使用或不使用指令。您只需将传入数据分配到适当的范围。例如，$ scope.data = factoryService.data;类似的东西。

Answer 3

您不需要为此设置自定义指令，您可以将searchInfo绑定到实际的input元素并使用内置的ng-click指令。这个原则的一个很好的例子可以在http://viralpatel.net/blogs/angularjs-controller-tutorial/找到。

我是否需要搜索组件的指令？

3 个答案: