如何在控制器之间共享来自休息服务的数据

How share data from rest service between controllers

本文关键字：服务 数据 控制器 之间 共享      更新时间：2023-09-26

我的问题在于REST服务中有一些数据，我想获取它们，然后发送到其他控制器。但我不知道如何正确地执行，因为服务$http.get（）是异步执行的。我将向您展示我的代码片段，以便更好地表示问题。

我创建了一个控制器，负责从REST服务获取数据。

MyApp.controller("AppController", ["$scope", "$http", function($scope,$http) {
    $http.get("http://localhost:8080/library/book").success(function(data) {
        $scope.bookList = data;
    });
    $http.get("http://localhost:8080/library/author").success(function(data) {
        $scope.authorList = data;
    });
    $http.get("http://localhost:8080/library/publisher").success(function(data) {
        $scope.publisherList = data;
   });
}]);

BookList、authorList、publisherList是其余控制器的构建材料。

好的，我展示另一段代码。

MyApp.service("BookListModel", function() {
this.createBookList = function(bookList, authorList, publisherList) {
    var i = 0, j = 0, authorName, publisherName, bookListItems = [];
    for(; i < bookList.length; i++) {
        for(; j < authorList.length; j++) {
            if(bookList[i].authorId == authorList[j].authorId) {
                authorName = authorList[j].name;
            }
        }
        j = 0;
        for(; j < publisherList.length; j++) {
            if(bookList[i].publisherId == publisherList[j].publisherId) {
                publisherName = publisherList[j].name;
            }
        }
        j = 0;
        bookListItems.push({'title' : bookList[i].title, 'author' : authorName, 'publisher' : publisherName});
        authorName = "", publisherName = "";
    }
    return bookListItems;
};
});

例如，这是我的一个系列。它与作者和出版商一起创建图书列表，需要三个参数，我不知道如何将数据从AppController传递到createBookList函数。

使用工厂/服务进行REST调用（不要在控制器中进行）。

如果您同时进行所有这些调用，则可以使用$q.all（）组合promise并获得一个promise。

每当控制器得到这个承诺时，它们每次都会得到相同的数据，并且您的REST服务只会被调用一次。

您的控制器只需调用LibraryService.getLibraryData（）并处理获取数据本身的承诺。

MyApp.factory('LibraryService', function($http, $q){
    var service = {};
    var libraryDataPromise = $q.defer();
    $q.all({
        books: $http.get("http://localhost:8080/library/book"),
        authors: $http.get("http://localhost:8080/library/author"),
        publishers: $http.get("http://localhost:8080/library/publisher"),
    }).then(function(response){
        libraryDataPromise.resolve({
            bookList: response.books,
            authorList: response.authors,
            publisherList: response.publishers
        });
    });
    service.getLibraryData = function() {
      return libraryDataPromise.promise;    
    };
    return service;
});

您还可以进行角度广播。在您的"AppController"中：

....
http.get("http://localhost:8080/library/book").success(function(data) {
    $scope.$broadcast('bookList-updated', data);
}
....

然后在你想使用数据的其他控制器中这样做：

....
$scope.$on('booklist-updated', function(event, booklist){
    $scope.booklist = booklist;
});
....

使用角度服务

app.service('mySharedService', function ($rootScope) {
    this.bookList = [];
    this.authorList = [];
    this.publisherList = [];
    this.setBookList = function (bookList) {
        this.bookList = bookList;
    };
    this.setPublisherList = function (publisherList ) {
        this.publisherList = publisherList ;
    };
    this.setAuthorList = function (authorList ) {
        this.authorList  = authorList ;
    };
    this.getBookList = function () {
        return this.bookList;
    };
    this.getPublisherList  = function () {
        return this.publisherList;
    };
    this.getAuthorList = function () {
        return this.authorList;
    };
});

确保将您的服务传递''注入您的控制器

MyApp.controller("AppController", ["$scope", "$http", "mySharedService", function($scope,$http) {
$http.get("http://localhost:8080/library/book").success(function(data) {
    $scope.bookList = data;
    mySharedService.setBookList(data);
});
$http.get("http://localhost:8080/library/author").success(function(data) {
    $scope.authorList = data;
    mySharedService.setPublisherList(data);
});
$http.get("http://localhost:8080/library/publisher").success(function(data) {
    $scope.publisherList = data;
    mySharedService.setAuthorList(data);
});
}]);

注意：我没有测试代码。

相关文章：