Question

我有JSONP请求，回调函数在Angular Controller之外。如何将该功能的数据返回给Controller？或者也许有一种方法可以在Controller内部回调函数？

添加'？callback = JSON_CALLBACK '不会触发成功承诺。我认为这是因为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

我在搜索和尝试后找到了这个解决方案，在你的情况下，这个解决方案比使用angular.element(....).scope()的其他解决方案，因为我们在（angular.element（。。scope）中使用角度服务$window我们使用的东西可能会在某些角度模式下被禁用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＆＃34; scope＆＃34;中执行控制器中的功能：

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>

Answer 2

我会这样做的：此代码使用$ 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>

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

2 个答案: