当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

I am just starting out with the MEAN stack and not really sure what the optimal way to share data and detect change in another controller would be. I have the text/search input in the header, logic for that in one controller (TypeheadController) and after someone either selects a value from the typeahead/autocomplete list or presses the search button I wish for Searchresultscontroller to detect a change for a property on the startSearchService and use that value to load search results.

The main layout.server.html template

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

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

});

};

网友答案:

Make your startSearchService expose functions rather than a field:

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

    var searchString = "";

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

Then make it broadcast an event every time the searchString is modified:

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

    var searchString = "";

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

From your TypeaheadController, call the set() function to modify the search string.

From your SearchresultsController, listen on the 'searchStringChanged' event:

$scope.$on('searchStringChanged', function() {
    var searchString = startSearchService.get();
    // TODO do something with the new searchString
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: