Angularjs不在Chrome中工作，但在Firefox中工作

我一直在開發Firefox代碼工作正常，但是當我嘗試在Chrome上測試時，它只顯示{{err_msg}}，這意味着角度不起作用。我正在使用Django 1.10服務器與Rest Framework來管理來自Angularjs 1.5.9代碼的獲取請求。我在Firfox，Midori & Chrome上測試過。它只適用於Firefox！Angularjs不在Chrome中工作，但在Firefox中工作

我編輯hosts文件，以便givemecoupon.com:8000重定向到127.0.0.1:8000這是我的Django服務器。

控制檯錯誤：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.9/$injector/modulerr?p0=givemecouponApp&p1=…Ic%20(https%3A%2F%2Fcode.angularjs.org%2F1.5.9%2Fangular.min.js%3A21%3A332) 
    at angular.js:38 
    at angular.js:4683 
    at q (angular.js:325) 
    at g (angular.js:4644) 
    at eb (angular.js:4566) 
    at c (angular.js:1803) 
    at Ic (angular.js:1824) 
    at ue (angular.js:1709) 
    at angular.js:32379 
    at HTMLDocument.b (angular.js:3251)

我的應用程序：

'use strict'; 
var givemecouponApp = angular.module('givemecouponApp', []); 

givemecouponApp.controller('CouponsCtrl', ['$scope', '$http', 'givemecouponService', function CouponsCtrl($scope, $http, givemecouponService) { 
    $scope.finderloader=true; 
    $scope.err_msg = 'no error'; 
    var myDataPromise = givemecouponService.getData(); 
    myDataPromise.then(function(result) { 
    if(result.data == "Not a valid course!" || result.data == "No course passed!"){ 
     $scope.err_msg = result.data; 
    }else{ 
     $scope.coupons = result.data; 
    } 
    }, function (result) { 
    if(result.status == 429){ 
     $scope.err_msg = "Too many requests!"; 
    } 
    // TODO: handle the error somehow 
    }).finally(function() { 
    // called no matter success or failure 
    $scope.finderloader = false; 
    }); 
}]); 


//service for getting coupon codes 
givemecouponApp.factory('givemecouponService', function($http) { 
    var getData = function() { 
    // Angular $http() and then() both return promises themselves 
    return $http({method:"GET", url:slug_json_url}).then(function(result){    // What we return here is the data that will be accessible 
     // to us after the promise resolves 
     return result; 
    }); 
    }; 

    return { getData: getData }; 
});

模板：

{% load static %} 

<!DOCTYPE html> 
<html ng-app="givemecouponApp"> 
<head> 
    <meta charset="utf-8"> 
    <title>Course Page</title> 
    <script src="https://code.angularjs.org/1.5.9/angular.min.js" type="text/javascript"></script> 
    <script src="https://code.angularjs.org/1.5.9/angular-resource.min.js" type="text/javascript"></script> 
    <link rel="stylesheet" href="{% static 'css/spinkit.css' %}"> 
</head> 

<body ng-controller="CouponsCtrl"> 
    <div> 
     {% block content %} 
     <h1>Course Page</h1> 
     {{course_slug_url}} 
     {% endblock content %} 

     {% verbatim %} 
     <div>Coupons: 
      <div>{{err_msg}}</div> 
      <div ng-show="finderloader" class="sk-wave"> 
       <h3>Looking for Coupons</h3> 
       <div class="sk-rect sk-rect1"></div> 
       <div class="sk-rect sk-rect2"></div> 
       <div class="sk-rect sk-rect3"></div> 
       <div class="sk-rect sk-rect4"></div> 
       <div class="sk-rect sk-rect5"></div> 
      </div> 

      <h2 ng-repeat="coupon in coupons" ng-show="coupon.id==1"> 
       {{coupon.meta_title}} 
      </h2> 
      <h2 ng-repeat="coupon in coupons" ng-show="coupon.id==1"> 
       Original Price: {{coupon.original_price}} 
      </h2> 
      <ul ng-repeat="coupon in coupons">Code: {{coupon.code}} 
       <li>Discount price: {{coupon.discounted_price}}</li> 
       <li>Discount rate: {{coupon.discount_rate}}</li> 
       <li>Valid untill: {{coupon.end_time}}</li> 
       <a href="{{coupon.deeplink}}" target="_blank">{{coupon.deeplink}}</a> 
      </ul> 
     </div> 
    </div> 
    {% endverbatim %} 
    {% block pass_slug %} 
    <script type="text/javascript"> 
     slug_json_url = "http://givemecoupon.com:8000/api/?format=json&slug={{course_slug_url}}"; 
    </script> 
    {% endblock pass_slug %} 
    <script src="http://givemecoupon.com:8000/static/js/app.js" type="text/javascript" charset="utf-8" async defer></script> 
</body> 
</html>

問題是什麼???

來源

2016-12-24 Mohamed El-Saka

在控制檯中是否顯示錯誤？ –

我將Chrome的控制檯日誌添加到帖子中 –

經過幾小時的搜索，我設法解決了這個問題。我只是改變

<script src="http://givemecoupon.com:8000/static/js/app.js" type="text/javascript" charset="utf-8" async defer></script>

到：

<script src="http://givemecoupon.com:8000/static/js/app.js" type="text/javascript"></script>

它是創建了造成問題的第一個代碼SublimeText片段。看起來async是什麼原因導致AngularJs無法在Chrome中運行&破解整個腳本！

Asynchronous execution <script async> 
Don’t care when the script will be available? Asynchronous is the best of both worlds: HTML parsing may continue and the script will be executed as soon as it’s ready. I’d recommend this for scripts such as Google Analytics.

然後固定異步問題後，我得到了這一點我解決了的https://github.com/ottoyiu/django-cors-headers/ 的幫助下通過將這些行settings.py文件CORS錯誤

XMLHttpRequest cannot load http://givemecoupon.com:8000/api/?format=json&slug=arduino-sbs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.givemecoupon.com:8000' is therefore not allowed access.

：

INSTALLED_APPS = [ 
    #django generated 
    #3rd party 
    'rest_framework', 
    'corsheaders', #manage Cross-side API requests 
    #my apps 
] 

MIDDLEWARE = [ 
    #cors headers 
    'corsheaders.middleware.CorsMiddleware', 
    'django.middleware.common.CommonMiddleware', 
    #django generated 
] 

# CORS allow anyone to get API calls 
CORS_ORIGIN_ALLOW_ALL = True

來源

2016-12-25 00:22:01

Angularjs不在Chrome中工作，但在Firefox中工作

回答

相關問題