跨域遇到的问题

这几天通过利用豆瓣提供的api,写了一个电影的跨域,数据都能得到,当我把数据注入到$scope中可以输出,但是在页面里取数据就是取不出。找问题找了一两个小时,都没发现哪里有问题。代码如下:
自定义跨域函数:

(function(angular){var app=angular.module("movie.service.jsonp",[]);app.service('jsonpService',function(){this.jsonp=function(url,callback){var funName="fun_"+Math.random().toString().replace(".","");//+"?callback="+一定不能少url=url+"?callback="+funName;window[funName]=callback;var script=document.createElement("script");script.src=url;//    追加到body里面document.head.appendChild(script);}});
})(angular);

这里要注意一下: url=url+"?callback="+funName;中的+"?callback="+一定不能少,少了的话地址就不对了。
调用jsonp函数获取数据

app.controller("hotCtrl",["$scope","jsonpService",function($scope,jsonpService){//angular自带的发出异步请求//  $http.get("./data.json").then(function(response){//     var array=response.data;//     $scope.array=array;//  });// 调用自己写的跨域函数// 用来存取data.subject里面的数据jsonpService.jsonp("https://api.douban.com/v2/movie/in_theaters",function(data){var array=[];for(var i=0;ivar directors="";var item=data.subjects[i];//导演信息是一个数组,所以要取出导演名字整理成一个字符串for(var j=0;jdirectors+=item.directors[j].name+"、";}//把最后一个、去掉directors = directors.substring(0,directors.length-1);array.push({"id":item.id,"src":item.images.small,"title":item.title,"grade":item.rating.average,"othername":"无","englishname":item.original_title,"director":directors,"type":item.genres.join("、"),"time":item.year,"summary":"无"});}$scope.array=array;// console.log($scope.array);$scope.title=data.title;// console.log($scope.title);$scope.count=data.count;$scope.start=data.start;$scope.total=data.total;$scope.$apply();});}]);

页面中取数据

 <h2>{{title}}h2>

而且我在要插入数据的地方也加了ng-app=”movieApp ” ng-view

 <div class="content" ng-app="movieApp" ng-view>div>

把能找的都能找了,页面就是显示不了数据。
最后,找到一个解决办法说要在$scope注入数据后加上

$scope.$apply();

最终页面呈现:
这里写图片描述
其实如果使用angular的话,页面会自动刷新,目前还不知道这里为什么一定要加这样一句。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部