AngularJS指令Google Chrome问题
[英]AngularJS directive Google Chrome issue
问题描述
I'm learning AngularJS and I didn't understand that problem on Google Chrome and Opera. 
我正在学习AngularJS，但我在Google Chrome和Opera上不了解该问题。 When I run this code Firefox, it works fine. 当我运行此代码Firefox时，它可以正常工作。 If you have any idea for this issue, I will be happy. 如果您对此问题有任何想法，我将很高兴。
My AngularJs Code like this in app.js file 我的AngularJs代码在app.js文件中是这样的
(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',
};
});
})();
and my main html file like that 和我的主要html文件一样
<!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>
and my todo-items.html file like that 和我的todo-items.html文件一样
<span class="badge">{{item.completed}}</span>
{{item.title}}
And json data type like that 像这样的json数据类型
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
But when I run this code on Google Chrome it looks like that 但是当我在Google Chrome浏览器上运行此代码时
Google Chrome Result Screenshot Google Chrome结果截图
And it works on Firefox 它可以在Firefox上运行
2 个解决方案
解决方案1
0 2016-06-08 10:53:36
Which chrome version you used? 您使用了哪个Chrome版本？ Because it's working in chrome,firefox,opera.. 因为它在chrome，firefox，opera中工作。
And you don't need to create a directory for listing. 而且，您无需创建要列出的目录。
It's also directory display. 这也是目录显示。
(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"> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </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}" > <span class="badge">{{item.completed}}</span> {{item.title}} </li> </ul> <!-- AngularJS v1.5.6 --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>
解决方案2
0 已采纳 2016-06-27 11:11:43
This error is happening because you are just opening html documents directly from the browser.To fix this you will need to serve your code from a webserver and access it on localhost. 发生此错误是因为您只是直接从浏览器中打开html文档。要解决此问题，您需要从网络服务器提供代码并在localhost上访问它。 When I open this file by an IDE (Visual studio, Eclipse etc) as a web site project then it works fine in Google Chrome. 当我通过IDE（Visual Studio，Eclipse等）作为网站项目打开此文件时，它在Google Chrome中可以正常工作。
Comparative cover, result 比较封面，结果
This helped me for this issue. 这对我解决了这个问题。 AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https AngularJS错误：跨源请求仅支持以下协议方案：http，数据，chrome扩展名，https
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.