AngularJS服务未显示

时间:2015-09-02 13:18:38

标签: javascript angularjs angularjs-directive

我只是使用Github的API抓取我的Github信息。当我记录我的http请求时,它会显示正确的信息..我不知道为什么它没有显示在页面上。我没有收到任何错误。 (部分显示,而不是请求的数据)

服务

myApp.factory('githubApi', ['$http',
    function($http) {
        //Declaring a promise that will or will not return a users github information.
        return {
            async: function() {
                return $http.get('https://api.github.com/users/joshspears3');
            }
        }
    }
]);

控制器

myApp.controller('githubCtrl', [ 'githubApi', '$scope',
    function(githubApi, $scope){
        $scope.data = githubApi.async();
    }
]);

指令

myApp.directive('githubRequest', [
    function() {
        return {
            scope: {},
            restrict: 'E',
            controller: 'githubCtrl',
            templateUrl: 'public/views/partials/github-request.html'
        }
    }
]);

github-request.html (部分):

<p class="component-example-header">Creating a service. Grabbing information based on the github API.</p>
<div>
    Making a $http request to grab my personal Github information.
    <p>Avatar:</p>
    <img width="20%"src="{{data.avatar_url}}" alt="" />
    <p>Username: {{data.login}}</p>
    <p>Followers: {{data.followers}}, Following: {{data.following}}</p>
</div>

的index.html

  <div>
     <global-header></global-header>
     <div ui-view></div>
     <github-request></github-request>
  </div>

1 个答案:

答案 0 :(得分:7)

你这里没有使用过承诺。将异步功能更改为:

return $http.get('https://api.github.com/users/joshspears3').success(function(response) {
    return response.data
});

和您的控制器

function(githubApi, $scope){
    githubApi.async().then(function(data) {
        $scope.data = data;
    });
}