Question

我对整个有棱角的事情都很陌生，我遇到了一些问题。

我想要做的是拥有一个与API通信的服务，API响应保存在服务中，因此可供不同的控制器使用。

服务如下：

angular.module('exampleApp').service('locationService', function ($http) {

    this.tiles = {};
    var location = this;

    this.getLocationTiles = function() {
        return $http.get('http://some.url').then(function(data) {
            location.tiles = data.data;
        });
    }
});

控制器：

angular.module('exampleApp')
    .controller('TileCtrl', ['$scope', 'locationService', function ($scope, locationService) {
        $scope.tiles = locationService.tiles;
    }]);

是否有一种或多或少的简单方法来实现$ scope.tiles在http调用成功时实际获取数据？

Answer 1

如何以角度

的详细信息

所以这是我之前回答的关于Ionic的问题，但它也适用于此。您可以看到http请求如何从工厂开始，然后是控制器，直到最后到达html。

在services.js工厂

从工厂开始，但更换我的网址。

.factory('Friends', function ($http, $rootScope, $stateParams) {

  return {
    all: function () {
      return $http.get('https://friends.json/all', { params: { user_id: $rootScope.session } })
    },
    get: function () {
      return $http.get('https://friends.json/getOne', { params: { user_id: $rootScope.session, chat_id: $stateParams.idchat } })
    },
    add: function (id) {
      return $http.get('https://friends.json/new', { params: {idfriends:id}})
    }
  };
});

controller.js中的控制器

然后制作一个像这样的控制器。这是当您实例化工厂以获取数据时。

.controller('FirendsCtrl', function ($scope, Friends) {

  Friends.all().success(function (response) {
    $scope.chats = response;
  })
})

范围已添加到视图

这会将数据绑定到范围。并且可以将其提供给视图。

最后，您将能够通过$ scope将数据带到视图中我已经在这里创建了一个列表，列出了你从朋友那里得到的所有朋友，他们有一个很好的一面，可以添加更多内容或删除。

<ion-view view-title="Contacts">
  <ion-content>
  <ion-list>
      <ion-item class="item-icon-right" ng-repeat="data in friends">
          <h1>{{ data.username }}</h1>
          <p>{{ data.friendNumber}}</p>
          <i class="icon ion-chevron-left icon-accessory"></i>
          <ion-option-button class="button-positive" ng-click="viewFriend(viewFriend(data.idfriends))">View Friend</ion-option-button>
          <ion-option-button class="button-assertive" ng-click="deleteFriend(remove(data.idfriends))">Delete</ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

<强>声明

这是我之前写过的一些代码。我没有完全运行这个版本，但我的完整版本工作正常。

如果您希望查看完整代码，请随时查看我的github回购https://github.com/joeLloyd/Scripto5000

Answer 2

您可以等待承诺完成，然后设置$scope.tiles属性。

angular.module('exampleApp')
.controller('TileCtrl', ['$scope', 'locationService', function ($scope, locationService) {
    locationService.getLocationTiles().then(function() {
      $scope.tiles = locationService.tiles;
    });
}]);

angular：服务中的http请求，将数据返回给控制器

2 个答案: