Question

我刚刚开始使用MEAN堆栈并且不确定共享数据和检测另一个控制器中的更改的最佳方式是什么。我在标题中有文本/搜索输入，在一个控制器（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>

startSearchService

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;

  }

};

SearchresultsController

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

在搜索/标题和搜索结果的控制器之间共享数据的最佳方法是什么

1 个答案: