将数据从 JSONP 回调函数传递到 Angular 控制器

Question

我有 JSONP 请求回调函数在 Angular 控制器之外。我如何 return 从该函数返回控制器的数据？或者也许有一种方法可以在 Controller 中调用回调函数？

添加 '?callback=JSON_CALLBACK' 不会激发 success 承诺。我认为这是因为 JSONP 响应包含在函数调用中： CBR_XML_Daily_Ru({"Date":"2016-10-06T00:00:00+00:00" ... });

<div ng-controller='myCtrl' ng-app='myApp'>
    <input type=text ng-model='divForCharCode'></input>
    <div id='div1'></div>
</div>

<script>CBR_XML_Daily_Ru = function(data) {
  document.getElementById("div1").innerHTML = data.Valute.EUR.CharCode;

};

var myApp = angular.module('myApp', [])
  .controller('myCtrl', myCtrl);

  function myCtrl($scope,$http) {
      $scope.divForCharCode = ' need to place EUR here!';
    $http.jsonp('https://www.cbr-xml-daily.ru/daily_jsonp.js');
  };</script>

https://plnkr.co/edit/hKdXf7MxAhnU8aMFqPUV

Answer 1

我会这样做：此代码具有使用 $q 的完整功能承诺。希望这有帮助

     <div ng-controller='myCtrl' ng-app='myApp'>
        <input type=text ng-model='divForCharCode'></input>
        <div>{{data.Valute.EUR.CharCode}}</div>
    </div>

    <script>

        var myApp = angular.module('myApp', [])
          .controller('myCtrl', myCtrl);

          function myCtrl($scope,$http, $q) {
              var self = this;
              self.divForCharCode = ' need to place EUR here!';

              var getDataFromServer = function(){
              var deferred = $q.defer(); // creating a promise
              var url = "https://www.cbr-xml-daily.ru/daily_jsonp.js?callback=JSON_CALLBACK";
              $http.get(url).success(function (data, status, headers,config) {
                deferred.resolve(data);
            }).error(function (data, status, headers, config) {
                //this always gets called
                console.log(status);
                deferred.reject(status);
            });
            return deferred.promise;
          }
           var promise = getDataFromServer();
           promise.then(function(data){
           $scope.data = data;
           });

          };
</script>

Answer 2

我在搜索和尝试后想出了这个解决方案，在你的情况下这个解决方案比其他使用 angular.element(....).scope() 的解决方案，因为这里我们使用 angular 服务 $window 而在 (angular.element().scope) 中我们使用的东西可能在某些 angular 中被禁用模式，check this.

CBR_XML_Daily_Ru = function(data) {
  window.angularJsonpCallBackDefindInController(data);

};

var myApp = angular.module('myApp', []).controller('myCtrl', myCtrl);

function myCtrl($scope, $http,$window) {
  var self = this;

  $http.jsonp('https://www.cbr-xml-daily.ru/daily_jsonp.js?callback=JSON_CALLBACK');
  $window.angularJsonpCallBackDefindInController = function (data) {
      //u can do anything here, you are in the controller, and in the same time this function in the window object and get called from anywhere even in jquery 
     self.divForCharCode = data.Valute.EUR.CharCode;
  };
}

你也可以使用这种方式在控制器中执行函数 jquery "scope":

CBR_XML_Daily_Ru = function(data) {
  angular.element("#controllerDivId").controller().angularJsonpCallBackDefindInController(data);

};

var myApp = angular.module('myApp', []).controller('myCtrl', myCtrl);

function myCtrl($scope, $http,$window) {
  var self = this;

  $http.jsonp('https://www.cbr-xml-daily.ru/daily_jsonp.js?callback=JSON_CALLBACK');
  self.angularJsonpCallBackDefindInController = function (data) {
     self.divForCharCode = data.Valute.EUR.CharCode;
  };
}

这是 html（您需要包含 jquery 才能使用第二种解决方案）

<html>

<head>
  <script src="jquery-3.1.1.min.js"></script>
  <script src="angular.min.js"></script>
  <!--<link rel="stylesheet" href="style.css" />-->
  <script src="jsnopstuff.js"></script>
</head>

<body>
    <div id="controllerDivId" ng-controller='myCtrl as ctrl' ng-app='myApp'>
        <input type=text ng-model='ctrl.divForCharCode'>
        <div id='div1'></div>
    </div>

</body>
</html>

将数据从 JSONP 回调函数传递到 Angular 控制器

Pass data from JSONP callback function to Angular controller

jsonp

angularjs