在AngularJS中使用API

时间:2015-02-14 06:50:20

标签: angularjs api angularjs-directive angularjs-service angularjs-http

我正在尝试创建一个显示多个“用户”的“频道”数据的布局。我正在使用的API需要先查询一个用户名列表,然后再查询每个用户以获取频道信息。

我尽了最大的努力但最终没有运气打破了一切。

这是plunker ...

HTML:

  <body ng-controller="ChannelCtrl">
    <channel ng-repeat="username in names" data-username="{{ username }}">a</channel>
  </body>

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

app.controller('ChannelCtrl', ['$scope', 'channelService', function($scope, channelService) {
  $scope.names = channelService.getUsers();
}]);

JS:

app.factory('channelService', ['$http', function($http) {
  return {
    getUsers: getUsers,
    getChannel: getChannel
  };

  function getChannel(name) {
    $http.get('api/channels'+name+'Channel.json')
    .success(function(data, status, headers, config) {
      console.log(data);
      return data;
    });
  }

  function getUsers() {
    $http.get('api/users.json')
    .success(function(data, status, headers, config) {
      console.log(data);
      return data;
    });
  }
}]);

app.directive('channel', ['channelService', function(channelService) {
  return {
    restrict: 'E',
    template: "Hello {{ channel }}<br>",
    link: function(scope, element, attrs) {
      scope.channel = channelService.getChannel(attrs.username);
      console.log('channel::link', scope.channel);
    }
  };
}]);

1 个答案:

答案 0 :(得分:1)

您必须在服务中返回$ http.get函数。然后,要访问控制器中的数据,必须调用$ http success函数并将数据响应分配给scope变量。这是因为$ http.get函数的异步行为。

<强>更新

我已更新了plunker,因此它会显示您想要的输出。您不必在指令中使用attrs,因为您可以从ng-repeat元素(Scope Chain)访问范围数据。如果您未在指令定义对象中设置scope属性,则这是默认行为。 我还删除了评论中提到的服务中不必要的成功函数调用。

控制器:

app.controller('ChannelCtrl', ['$scope', 'channelService', function($scope, channelService) {
  channelService.getUsers().success(function(users) {
    $scope.users = users; 
  });
}]);

服务:

app.factory('channelService', ['$http', function($http) {
  return {
    getUsers: getUsers,
    getChannel: getChannel
};

 function getChannel(name) {
   return $http.get('api/channels/' + name + 'Channel.json');
 }

 function getUsers() {
   return $http.get('api/users.json');
 }
}]);

指令:

app.directive('channel', ['channelService', function(channelService) {
  return {
    restrict: 'E',
    template: "Hello {{ channel }}<br>",
    link: function(scope, element, attrs) {
       channelService.getChannel(scope.user.username).success(function(data) {
       scope.channel = data[0].channel;
     });
  }
};
}]);

Updated Plunker