Question

我目前有2个指令：

<div ng-controller="indexViewModel">
    <div class="row">
        <searchfilters></searchfilters>
    </div>
    <div class="row top-buffer">
        <searchfields></searchfields>
    </div>
</div>

他们都指定了templateUrl，并调用2个单独的服务来处理每个项目的列表。

var SearchFiltersService= angular.module('SearchFiltersService', [])
.service('SearchFilters', function () {
    this.MyList = [];
    return this;
});

var SearchFieldsService= angular.module('SearchFieldsService', [])
.service('SearchFields', function () {
    this.MyList = [];
    return this;
});

我不想提供太多代码，因为我认为我可能会错误地考虑这个问题。我遇到了周期性依赖问题。

我如何拥有2个模板，每个模板都有一个服务（只是一个项目列表作为其唯一属性），其中每个服务可以添加和删除项目，这些项目将反映在其他服务中（在另一个服务中））？

Answer 1

正如Daniel Beck在评论中给出了一个很好的答案，关于如何处理需要彼此传递数据的2个服务，在这种情况下是2个列表。下面显示了一个可以处理添加项目的共享服务，然后可以实现进一步的逻辑来根据项目插入的子服务来更改列表。

var SearchSharedService= angular.module('SearchSharedService', ['SearchFiltersService', 'SearchFieldsService'])
.service('SearchShared', function (SearchFilters, SearchFields) {

    this.addFilter = function(filter) {
        //Perform logic to change filterto desired format for each child service
        SearchFilters.myList.push(filter);
        SearchFields.myList.push(filter);
    };

    this.addField = function(field) {
        //Perform logic to change field to desired format for each child service
        SearchFilters.myList.push(field);
        SearchFields.myList.push(field);
    };
    return this;
});

var SearchFiltersService= angular.module('SearchFiltersService', [])
.service('SearchFilters', function () {
    this.myList = [];
    return this;
});

var SearchFieldsService= angular.module('SearchFieldsService', [])
.service('SearchFields', function () {
    this.myList = [];
    return this;
});

注意：共享服务需要包含在您的模块中

var app = angular.module('myApp', ['SearchSharedService']);

如何在服务之间进行双向通信？

1 个答案: