Do I need a directive for a search component?

Question

I am new to angularJS, and this task would be very easy if i just used JQuery, but i am trying to do it right.

Basically, i would like a text input field, and when the user presses search (after typing in something), i want to be able to do a search using that value via Ajax, and then show the returned records in a list.

I understand that to do this, i need to use directives?

I am not looking for someone to write this out, but please point me in the right direction, or just provide a few examples so i can build it myself.

MY DIRECTIVE (SO FAR)

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>

ON MY ACTUAL PAGE

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

Answer 1

Since you're planning to reuse the element, a directive does make sense.

Based on what you've described, I imagine it could be organized like so:

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

... but your mileage may vary based on exactly what you're trying to accomplish. Generally speaking, in addition to using directives for reusable components, you should also use services to handle your data (including AJAX queries).

Answer 2

One way to do this:

1- For the ajax call, you don't really need a directive. You should make your ajax call with $http or $resource module in your controller or better, in a seperate factory. Then you will just have a ng-click directive in your input tag, which will call your search function and pass your search data.

2- To show the data, you can either use a directive or not. You only have to assign your incoming data to the appropriate scope. eg, $scope.data = factoryService.data; something similar.

Answer 3

You do not need a custom directive for this, what you can do is put your searchInfo binding into the actual input element and use the built in ng-click directive. A very good example of this principle can be found here http://viralpatel.net/blogs/angularjs-controller-tutorial/.