Question

我使用controller在service中调用json，但是我收到一条错误，上面写着“TypeError：无法读取属性”，然后是“未定义”。我尝试了现有的答案，但无法让它发挥作用。

控制器：

app.controller("myController",["$scope","MyService","$http", function($scope,MyService,$http){
$scope.hi = "hello";
MyService.getMyData().then(function(response){
console.log(response);
});
}]);

服务：

app.service("MyService", ["$http", function($http) {

  this.getMyData = function() {
    return
    $http({
      method: 'GET',
      url: 'myList.json',
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(function successCallback(response) {
      console.log(response);
      return response;
    }, function errorCallback(response) {
      console.log(error);
      return response;
    });
  };
}]);

谢谢。

Answer 1

目前你刚刚在{1}}（在第一行）的下一行返回return承诺。基本上你只有$http它没有返回任何/未定义（这是javascript的工作原理）＆amp; return函数会忽略下一个语句。

你必须拥有this.getMyData＆amp; return承诺在一行中，否则$http({将返回空语句。

return

Answer 2

@pankajparker绝对正确。

为kicks实现了一个codepen并调整为使用Angular 1.5的组件。这是链接： http://codepen.io/Lethargicgeek/pen/YWryoE

＆＃13;

(function() {
  angular.module("myApp", []);

  angular.module("myApp").component('myCmp', {
    controller: ctrlFn,
    templateUrl: "myCmp.tpl.html"
  });

  ctrlFn.$inject = ["myService"];

  function ctrlFn(myService) {
    var $ctrl = this;
    // BINDINGS 
    $ctrl.hi = "hello";
    $ctrl.getData = getData;
    $ctrl.data = null;

    $ctrl.myService = myService; // Binding so that we can easily see results
    // END BINDINGS

    // FUNCTION
    function getData() {
        var returnedPrms = myService.getMyData();
        returnedPrms.then(function(response) {
          $ctrl.data = response;
        });
      }
      // END FUNCTIONS 
  }

  angular.module("myApp").service("myService", svcFn);
  svcFn.$inject = ["$http"];

  function svcFn($http) {
    var svc = this;
    //BINDINGS
    svc.getMyData = getMyData;
    //END BINDINGS

    function getMyData() {

      var firstPrms = $http.get("http://codepen.io/anon/pen/LVEwdw.js"); // Random bit of json pulled from internets
      var secondPrms = firstPrms.then(function success(response) {
        svc.successResp = response;
        return response;
      }, function error(response) {
        svc.errorResp = response;
        return response;
      });
      return secondPrms;
    }
  }
})(); // end iife

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="myApp">
  <script type="text/ng-template" id="myCmp.tpl.html">
    <div>
      <h1>{{$ctrl.hi}}</h1>
      <a class="btn btn-primary" ng-click="$ctrl.getData()">
      	Trigger $Http Call
      </a>

      <dl class="dl-horizontal">
        <dt>$ctrl.data:</dt>
        <dd>{{$ctrl.data}}</dd>

        <dt>$ctrl.myService.successResp:</dt>
        <dd>{{$ctrl.myService.successResp}}</dd>

        <dt>ctrl.myService.errorResp:</dt>
        <dd>{{ctrl.myService.errorResp}}</dd>
      </dl>
    </div>
  </script>

  <my-cmp></my-cmp>
</div>

＆＃13;

使用服务时“无法读取属性然后”错误

2 个答案: