search/header 和搜索结果的控制器之间共享数据的最佳方式是什么

Question

我刚开始使用 MEAN 堆栈，不确定共享数据和检测另一个控制器中的变化的最佳方式是什么。我在 header 中有 text/search 输入，一个控制器 (TypeheadController) 中的逻辑，在有人从 typeahead/autocomplete 列表中选择一个值或按下我希望的搜索按钮后 Searchresultscontroller检测 startSearchService 上属性的更改并使用该值加载搜索结果。

主layout.server.html模板

<body>

<header ng-controller="HeaderController">
<nav></nav>
<div ng-controller="TypeaheadController">
<input type="text" typeahead-on-select="onSelect($item, $model, $label)" />
</div>
</header>

//**this is where angular-ui-router.js will load templates into.** 
<section data-ui-view></section>

</body>

client.searchresults.html 模板。

<div ng-controller="SearchresultsController">
**//the SearchresultsController will pull JSON search result data and populate this template. Presentation logic omitted for clarity**
</div>

开始搜索服务

angular.module('myapp').service('startSearchService', function() {

this.searchString = "";


});

TypeaheadController

var TypeaheadController = function($scope, $http, startSearchService)
{
  //function that pulls and maps name suggestion for typeahead goes here.

  //Upon user selecting a typeahead suggestion, update the property on the service instance. OnSelect will fire when user selects suggestion.

$scope.onSelect = function(item, model, label) {

  startSearchService.searchString = item;

  }

};

搜索结果控制器

var SearchresultsController = function($scope, $http, startSearchService)
{
  //This controller should make the actual request to pull search results
 // after which the state will be changed to /searchresults/ and the       //client.searchresults.html template will be loaded and populated. Most Typeahead //directives and other code omitted for clarity.

//Upon user selecting a typeahead suggestion update the properties on the    //service. 
//OnSelect will fire when user selects suggestion.

**//I need logic to detect change in startSearchService.searchString and then I will use that value to pull in search results. The below $on function does not work and it's wrong way to watch for change**

startSearchService.searchString.$on('change', function(ev, args) {

//Pull data from Server
//then change $location to /searchresults/ and client.searchresults.html will    //load and $scope data will be binded to it.


});

};

Answer 1

使您的 startSearchService 公开函数而不是字段：

angular.module('myapp').factory('startSearchService', function() {

    var searchString = "";

    return {
        set: function(s) {
            searchString = s;
        },
        get: function() {
            return s;
        }
    };
});

然后让它在每次修改searchString时广播一个事件：

angular.module('myapp').factory('startSearchService', function($rootScope) {

    var searchString = "";

    return {
        set: function(s) {
            searchString = s;
            $rootScope.$broadcast('searchStringChanged');
        },
        get: function() {
            return s;
        }
    };
});

从您的 TypeaheadController 调用 set() 函数来修改搜索字符串。

来自您的 SearchresultsController，收听 'searchStringChanged' 事件：

$scope.$on('searchStringChanged', function() {
    var searchString = startSearchService.get();
    // TODO do something with the new searchString
});

search/header 和搜索结果的控制器之间共享数据的最佳方式是什么

What would be the best way to share data between controllers for search/header and search results

mean

angularjs

angular-ui-router