Question

这世界是伤心哭泣，我阻断与我不能确定，我无法从我的JSON文件中检索数据的一个问题两个小时，一切都在我的代码似乎是正确的。

这是我的工厂：

'use strict';
angular.module('starter.services')


.factory('userService',function ($http) {

	
        
        return{
			
			getUsers:function(){
				return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) {
							return response.data;
                        });
			}
			
		}
		
});

和这个控制器：

'use strict';
angular.module('starter.controllers', ['starter.services'])


 .controller('UsersCtrl', function($scope,userService) {
	 $scope.Users = [];
userService.getUsers().then(function (data) { $scope.Users= data.data; }); });
	
	
});

的index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
	<script src="lib/ionic/js/angular/angular-resource.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
	 <script src="js/UserControllerIonic.js"></script>
	  <script src="js/UsersServiceIonic.js"></script>
   
  </head>

  <body ng-app="starter" ng-controller="UsersCtrl">
  <ion-view>
     <div class = "list" >
            <a class = "item" ng-repeat = "user in Users">
                <h2>{{user.nom}}</h2>
               
            </a>
        </div>
</ion-view>
 
	
  </body>
</html>

提前谢谢

解

我解决了这个问题：

1-在config.xml中添加权限<allow-navigation href="http://*/*"/>

2 - 安装cordova-plugin-whitelist ionic plugin add cordova-plugin-whitelist

3-control control-allow-origin extention to chrome：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en-US

最后：通过将此代码添加到 Application_start 方法中的 Global.asax ，指定后端控制器返回的数据类型：config.Formatters.JsonFormatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented; config.Formatters.Remove(config.Formatters.XmlFormatter);

希望这有助于某人

Answer 1

您不想在工厂内解决$http来电。

JS：

angular.module('app',[])
.controller('MainCtrl', function($scope, MyService){
  var url = "http://jsonplaceholder.typicode.com/users";
  MyService.getData(url).then(function(res){
    console.log(res.data);
    $scope.data = res.data;
  });
})
.service('MyService', function($http){
  return {
    getData: function(url){
      return $http.get(url);
    }
  }
})

HTML：

<!DOCTYPE html>
<html ng-app="app">

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

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="item in data">{{item.name}}</li>
    </ul>
  </body>

</html>

Answer 2

问题是您正在使用值response.data解析服务中的承诺，并再次期望已解析的值具有data属性。更改您的服务代码如下：

'use strict';
angular
  .module('starter.services')
  .factory('userService',function ($http) {
    return {        
      getUsers: function(){
        return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) {
          return response;
        });
      }
    }
});

或者简单地返回承诺如下：

'use strict';
angular
  .module('starter.services')
  .factory('userService',function ($http) {
    return {        
            getUsers: function(){
                return $http.get("http://localhost:26309/api/User/getAll/");
            }
        }
});

在IONIC中读取我的json文件的数据

2 个答案: