AngularJS Direktive Google Chrome Problem

Ich lerne AngularJS und ich habe das Problem bei Google Chrome und Opera nicht verstanden. Wenn ich diesen Code Firefox ausführe, funktioniert es gut. Wenn Sie eine Idee für dieses Problem haben, werde ich glücklich sein.AngularJS Direktive Google Chrome Problem

Mein AngularJS-Code wie dies in app.js Datei

(function(){ 
    var jsonDataServiceUrl = 'http://jsonplaceholder.typicode.com/todos'; 
    var app = angular.module('todoApp',[]); 

    app.controller('TodoController',['$http',function($http){ 
     var todo = this; 
     todo.items = []; 

     //Get json data 
     $http.get(jsonDataServiceUrl).success(function(data){ 
      todo.items = data; 
     }); 

    }]); 

    app.directive("todoItems",function(){ 
     return { 
      restrict: 'AE', 
      templateUrl: 'todo-items.html', 
     }; 
    }); 

})();

und meine Haupt-HTML-Datei wie die

<!DOCTYPE html> 
<html ng-app="todoApp"> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> 
</head> 
<body ng-controller="TodoController as todo"> 

    <ul class="list-group"> 
     <li class="list-group-item" ng-repeat="item in todo.items" ng-class="{'list-group-item-success':item.completed}" > 
      <todo-items></todo-items> 
     </li> 
    </ul> 

    <!-- AngularJS v1.5.6 --> 
    <script type="text/javascript" src="js/angular.min.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 

</body> 
</html>

und meine todo-items.html Datei wie die

<span class="badge">{{item.completed}}</span> 
    {{item.title}}

Und JSON-Datentyp wie das

{ 
    "userId": 1, 
    "id": 1, 
    "title": "delectus aut autem", 
    "completed": false 
}

Aber wenn ich diesen Code auf Google Chrome laufen sieht es so aus, dass

Google Chrome Result Screenshot

Und es funktioniert auf Firefox

Firefox Result Screenshot

Quelle

2016-06-08 Mecit Semerci

Dieser Fehler geschieht, weil Sie nur HTML-Dokumente öffnen diese direkt aus dem browser.To fixieren Sie sie benötigen, um auf localhost Ihren Code von einem Webserver und dem Zugang zu dienen. Wenn ich diese Datei mit einer IDE (Visual Studio, Eclipse usw.) als Website-Projekt öffne, funktioniert es in Google Chrome einwandfrei.

Comparative cover, result

Das half mir für dieses Problem. AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

Quelle

2016-06-27 11:11:43

Welche Chrom-Version verwendet? Weil es in Chrome funktioniert, Firefox, Oper ..

Und Sie müssen kein Verzeichnis für die Auflistung erstellen.

Es ist auch Verzeichnisanzeige.

(function(){ 
 
    var jsonDataServiceUrl = 'http://jsonplaceholder.typicode.com/todos'; 
 
    var app = angular.module('todoApp',[]); 
 

 
    app.controller('TodoController',['$http',function($http){ 
 
     var todo = this; 
 
     todo.items = []; 
 

 
     //Get json data 
 
     $http.get(jsonDataServiceUrl).success(function(data){ 
 
      todo.items = data; 
 
     }); 
 

 
    }]); 
 

 
})();

<!DOCTYPE html> 
 
<html ng-app="todoApp"> 
 
\t <head> 
 
\t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
\t </head> 
 
\t <body ng-controller="TodoController as todo"> 
 
\t \t 
 
\t \t <ul class="list-group"> 
 
\t \t \t <li class="list-group-item" ng-repeat="item in todo.items" ng-class="{'list-group-item-success':item.completed}" > 
 
\t \t \t \t <span class="badge">{{item.completed}}</span> 
 
\t \t \t \t {{item.title}} 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t 
 
\t \t <!-- AngularJS v1.5.6 --> 
 
\t \t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script> 
 
\t \t <script type="text/javascript" src="main.js"></script> 
 
\t </body> 
 
</html>

Quelle

2016-06-08 10:53:36 Kroonal

Ich will Direktive für Vorlage verwenden, es funktioniert auf Firefox aber es funktionierte nicht auf Crome und Opera. Als ich die Direktive nicht benutzt habe, habe ich gearbeitet. Meine Frage betrifft die Direktive. –

Es funktioniert auch mit Verzeichnis. – Kroonal

AngularJS Direktive Google Chrome Problem

Antwort

Verwandte Themen