2015-02-27 1 views
0

Я пытаюсь сделать это с использованием API-интерфейса RUG (Random User Generator), но я не могу заставить это работать. Я должен вызвать HTTP-запрос после события клика, но он, похоже, не работает. Вот что я сделал (и извините за мой дилетантский код):Использование генератора случайных данных для создания профилей с помощью angular.js

index.html

<!DOCTYPE html> 
<html lang="en" ng-app> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
</head> 
<body> 

    <div id="clk" style="background-color: indigo; widht: 100px; height: 100px"></div> 

    {{"Hello world"}} 
    <div ng-controller="firstController"> 
     {{ store.email}} 
    </div> 


    <script type="text/javascript" src="app.js"></script> 
</body> 
</html> 

app.js

var app = angular.module('people', []); 
app.controller('firsController', ["http",function (http) { 

    var store = this; 

    store.products = []; 


    $http.get('http://api.randomuser.me').success(function(data){ 
     store.products = data.results[0].user; 
    }) 
}]); 

ИЛИ

var boton = document.getElementById('clk'); 
boton.addEventListener('click', function() { 
    $.ajax({ 
     url: 'http://api.randomuser.me/', 
     dataType: 'json', 
     success: function(data){ 
     console.log(data.results[0].user); 
     } 
    }); 
}); 

Ни один из это может работать. Могу ли я заставить это работать, нажать кнопку и загрузить нового пользователя из api и использовать его с угловым?

+0

какая ошибка вы получаете? пожалуйста, объясните, что часть –

ответ

1

Это правильный путь использовать $http сервис и области видимости переменных.

<html ng-app="people"> 
    <head> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 

    <script type="text/javascript"> 

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

     app.controller('firstController', ["$scope", "$http", function ($scope, $http) { 

      $scope.store = {}; 

      $scope.store.products = []; 


      $http.get('http://api.randomuser.me').success(function(data){ 
       $scope.user = data.results[0].user; 
      }) 

     }]); 
     </script> 
    </head> 
    <body> 
    <div id="clk" style="background-color: indigo; widht: 100px; height: 100px"></div> 
    <div ng-controller="firstController"> 
     {{ user.email}} 
    </div> 
    </body> 
</html> 
+0

Использование 'this' в контроллере не * всегда * неправильно, особенно при использовании синтаксиса' controller as myctrl' в HTML. Подобно общему предупреждению, в этом случае это действительно поможет – floribon

Смежные вопросы