AngularJS directive Google Chrome issue

Question

I'm learning AngularJS and I didn't understand that problem on Google Chrome and Opera. When I run this code Firefox, it works fine. If you have any idea for this issue, I will be happy.

My AngularJs Code like this in app.js file

(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

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

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

And json data type like that

{
    "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 Result Screenshot

And it works on Firefox

Firefox Result Screenshot

score 0 · Answer 1 · answered Jun 08 '16 at 10:53

Which chrome version you used? Because it's working in 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>

I want use directive for template, It's works on firefox but It didn't work on crome and opera. When I didn't use directive, I worked. My question is about directive. — Mecit Semerci, Jun 08 '16 at 11:05

score 0 · Accepted Answer · edited May 23 '17 at 12:08

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. When I open this file by an IDE (Visual studio, Eclipse etc) as a web site project then it works fine in 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 directive Google Chrome issue

2 Answers2