Currently developing a small search application using Elasticsearch and AngularJS. The app consists of 2 pages: home and results page. However, I am encountering an issue with my custom search directive where I need to pass the value of a service into it. This service is a variable bound to the ngModel in my controller.
I am wondering how I can successfully pass the value of searchTerms from the home page to the results page...
This is the definition of my service:
.service('queryService', function() {
var searchTerms;
this.searchTerms = null;
In order to utilize the service, I inject it into the controller and set it as $scope:
$scope.searchTerms = queryService.searchTerms;
Following that, I employ $watch to monitor changes:
$scope.$watch('searchTerms', function() {
queryService.searchTerms = $scope.searchTerms;
});
This is how my directive is structured:
.directive('searchResults', ['queryService', function(queryService) {
return {
restrict: 'E',
replace: true,
scope: {
searchTerms: "=",
results: "=",
websiteUrls: "=",
suggestions: "&",
search: "&"
},
templateUrl: 'search/search-results.html',
link: function(scope, element, attrs) {
}
}
}]);
The input field for search is depicted below:
<input type="text" name="q" ng-model="searchTerms" placeholder="Search" class="form-control input-lg" id="search-input" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)" autofocus>
Although two-way data binding functions correctly, the autocomplete (Angular UI Bootstrap Typeahead) feature and search functionality are not exhibiting expected behavior. It appears that something may be missing within the link function, but my knowledge of AngularJS directives is still evolving.
Note: When initiating a search from the results page, everything operates as intended.
Further Details: Essentially, my objective is for users to input a search term on the home page, utilizing searchTerms as the ngModel. I have integrated AngularJS UI Bootstrap Typeahead for autocomplete capabilities as illustrated in the input tag. By initializing searchTerms as null in the queryService and injecting the service into the controller, I aim to establish a directive with an isolated scope receiving searchTerms, the results object, along with both autocomplete and search functions. At present, I am relying on ngRoute to maintain simplicity while working through the current design - consisting of only 2 pages.
HTML Snippet:
<search-results ng-model="searchTerms" website-urls="page" results="results" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)"></search-results>
Eureka moment, possibly: I believe I may have just resolved the issue thanks to my growing understanding of directives. Initially, I had all components functioning without employing a directive - utilizing routes, templates, and controllers. Could it be possible to simply incorporate my existing controller within the directive?
The motivation behind implementing a directive primarily stems from its integration with AngularJS when paired with a CMS.
Seems like I might finally be on the right path now...