Question

使用Elasticsearch和AngularJS构建一个小型搜索应用。 2页，主页和结果页面。一切都在工作，除了...我有这个自定义搜索指令，我试图将服务的价值传递给。该服务是一个绑定到我的控制器中的ngModel的变量。

如何将searchTerms的值从home传递到结果页面？

我的服务

.service('queryService', function() {
    var searchTerms;
    this.searchTerms = null;

我将服务传递给控制器并将其设置为$ scope

$scope.searchTerms = queryService.searchTerms;

然后我看着它进行更改

$scope.$watch('searchTerms', function() {
queryService.searchTerms = $scope.searchTerms;

}）;

我的指令看起来像这样

.directive('searchResults', ['queryService', function(queryService) {
    return {
        restrict: 'E',
        replace: true,
        //priority: 1001,
        scope: {
            searchTerms: "=",//ngModel
            results: "=",
            websiteUrls: "=",
            suggestions: "&",
            search: "&"
        },
        templateUrl: 'search/search-results.html',
        link: function(scope, element, attrs) {

        }
    }
}]);

我的搜索输入：

<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>

我有2路数据绑定工作，但没有自动完成（Angular UI Bootstrap Typeahead）或搜索功能。我非常肯定有一些东西可以用于链接功能，只是不确定...还在学习AngularJS指令。

注意：如果我从结果页面执行搜索，一切正常。

更多信息因此，基本上我尝试做的是用户在主页上输入搜索字词。 searchTerms是我的ngModel。我使用AngularJS UI Bootstrap Typeahead来实现自动完成功能（可以在输入标签上看到）。我有一个queryService，它将searchTerms启动为null，queryService是DI进入控制器。我有一个指令隔离范围（范围：{}），我传递searchTerms，结果对象以及自动完成和搜索功能。我现在正在使用ngRoute，因为我试图保持这个简单直到我工作 - 它只有2页。

HTML代码段

<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>

灯泡时刻，也许 随着我继续学习有关指令的更多信息，我想我刚刚解决了这个问题。我最初没有使用指令就完成了所有这些工作。使用路由，模板和控制器。我应该能够在我的指令中使用我当前的控制器，对吧？

我想使用指令的唯一原因是因为当AngularJS与CMS结合使用时，它似乎是最好的选择。

我现在走在正确的轨道上吗？

Answer 1

在进一步阅读（和理解）之后，似乎我可以使用我已经在我的指令中已经拥有的控制器，并且应该很好地解决这个问题。我将在完成并测试后发布结果。

试图将值传递给自定义指令

1 个答案: