AngularJS指令谷歌浏览器问题

我在学习AngularJS，并且我在Google Chrome和Opera上无法理解这个问题。当我运行这个代码的Firefox，它工作正常。如果你对这个问题有任何想法，我会很高兴。AngularJS指令谷歌浏览器问题

我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', 
     }; 
    }); 

})();

，并像

<!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>

和我的待办事项，items.html文件一样，

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

我的主HTML文件

和json这样的数据类型

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

但是，当我在谷歌浏览器运行这段代码，它看起来像

Google Chrome Result Screenshot

你使用哪个版本的Chrome它工作在Firefox

Firefox Result Screenshot

来源

2016-06-08 Mecit Semerci

此错误发生，因为你只是从browser.To打开HTML文档直接解决这个问题，你需要从一个网络服务器和访问本地主机上的服务代码。当我通过IDE（Visual Studio，Eclipse等）打开该文件作为网站项目时，它在Google Chrome中运行正常。

Comparative cover, result

这帮助我这个问题。 AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

来源

2016-06-27 11:11:43

？因为它的工作在铬，火狐，歌剧..

而且你不需要创建一个列表目录。

这也是目录显示。

(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>

来源

2016-06-08 10:53:36 Kroonal

我想使用模板指令，它适用于firefox，但它不适用于crome和opera。当我不使用指令时，我工作了。我的问题是关于指令。 –

它也适用于目录。 – Kroonal

AngularJS指令谷歌浏览器问题

回答

相关问题