2016-07-08 2 views
1

У меня есть кусок кода в angularjs. Если я жестко кодирую значение ответа HTTP, он отображает ответ, когда я использую метод http в angularjs, который он не отображает. Но я получаю ответ на эту ссылку на местном уровне. Я не знаю, где я ошибаюсь. Вот код

<!DOCTYPE html> 
<html> 
    <head> 
    <script script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script> 
     angular.module('myApp', []) 
     .controller('MyCtrl', function($scope,$http){ 

     $scope.test = [ 
    { 
    "done": 2, 
    "total": 7 
    } 
]; 
}); 
    </script> 
    </head> 
    <body ng-app="myApp" ng-controller="MyCtrl"> 
    <div ng-repeat="t in test"> 
     <span>{{t.done}}</span> 
     <span>{{t.total}}</span> 
    </div> 
    </body> 
</html> 

В скрипте еще раз, если я добавить код, приведенный ниже, его не отображает значения

<script> 
     angular.module('myApp', []) 
     .controller('MyCtrl', function($scope,$http){ 

     $http.get("http://localhost:8080/reports/webapi/hello/myresource2").then(function (response) { 

     $scope.test = response; 
    }); 
}); 
    </script> 
+4

Ваш код вводит в заблуждение. Вы выполняете ng-repeat в переменной 'test'. В вашем 'MyCtrl' нет такой переменной? –

+0

К сожалению, моя ошибка ... его $ scope.test только – Teja

+0

пожалуйста, проверьте console.log (response)? – varit05

ответ

1

Попробуйте отключить безопасность веб-браузера Google Chrome, если вы используете Google Chrome и запустите приложение, оно будет работать нормально.


Ваша проблема не с $http, а с CORS. Я столкнулся с этим вопросом, когда изучал угловой.

Так как у AngularJS или новых фреймворков с использованием AJAX есть небольшая проблема, называемая CORS (совместное использование ресурсов Cross Source), что означает, что мы можем получить доступ к ресурсу из того же домена из-за проблем с безопасностью.

См. Understanding CORS.

веб-приложения обслуживаются серверами, однако вы пытались открыть HTML непосредственно в браузере, который означает, что вы пытаетесь получить доступ к ресурсу http из file протокола, который не допускается в соответствии с CORS.

У вас есть два варианта использования.

  1. Disable web security in google chrome
  2. Запуск приложения в статическом сервере.
+0

Большое спасибо ...... Это сработало ....... только что реализованный второй вариант – Teja

+1

В дополнение к этому, он должен быть 'response.data' не просто' response' – Chinni

0

Фактическая data находится в response.data. Таким образом, обновить переменную области видимости соответственно,

Вашего код контроллера,

angular.module('myApp', []) 
    .controller('MyCtrl', function($scope, $http) { 
     $http.get("http://localhost:8080/reports/webapi/hello/myresource2") 
     .then(function (response) { 
      $scope.test = response.data; 
     }); 
}); 

Надеется, что это решает проблему.

+0

Я пытался с этим тоже ... не работает – Teja

+0

Можете ли вы добавить 'console.log (response.data)' и опубликовать вывод? – Chinni

+0

angular.module ('myApp', []) .controller ('MyCtrl', function ($ scope, $ http) { $ http.get ("http: // localhost: 8080/reports/webapi/hello/myresource2 ") . then (функция (ответ) { $ scope.test = response.data; console.log (JSON.stringify ($ scope.test)); }); ........ .... Его пустая – Teja

0

попытаться добавить еще одну функцию для ловли ответ ошибки

$http.get("http://localhost:8080/reports/webapi/hello/myresource2").then(function (response) { 
     $scope.test = response; 
    }, function(response){ 
     console.log(response) 
    }); 
0

Я также пошел к подобной проблемы и решить, добавив в него следующие заголовки HTTP в ответ на приемном конце.

Access-Control-Allow-Headers: Content-Type 
Access-Control-Allow-Methods: GET, POST, OPTIONS 
Access-Control-Allow-Origin: 

Вы можете предпочесть не использовать * в конце, но только имя_домена хоста, передающего данные. Например: * .example.com

Но это возможно только при наличии доступа к конфигурации сервера.

Вам необходимо добавить эти заголовки на сервер, а не в AngularJS Поскольку вы отправляете данные json через ваш api. Вам нужно сделать это.

<script> 
    angular.module('myApp', []) 
    .controller('MyCtrl', function($scope,$http){ 

    $http.get("http://localhost:8080/reports/webapi/hello/myresource2").then(function (response) { 

    $scope.test = response.data; 
}); 
}); 
</script> 
Смежные вопросы