AngularJS directive Google Chrome issue

默西·塞默西（Mecit Semerci）

I'm learning AngularJS and I don't understand the problem on Google Chrome and Opera. When I run this code Firefox it works fine. I will be glad if you have any thoughts on this issue.

My AngularJs code is 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',
       }; 
    });

})();

same as my main html file

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

Same as my todo-items.html file

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

json data type like this

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

But when I run this code on Google Chrome it looks like this

Screenshot of Google Chrome results

it works on firefox

Firefox result screenshot

默西·塞默西（Mecit Semerci）

This error occurs because you are just opening the html document directly from the browser. To fix this, you need to serve the code from a webserver and access it on localhost. When I open this file as a website project through an IDE (Visual Studio, Eclipse, etc.) it works fine in Google Chrome.

Compare covers, results

This solved the problem for me. AngularJS error: Cross-origin requests only support the following protocol schemes: http, data, chrome extension, https

Related

AngularJS directive Google Chrome issue

默西·塞默西（Mecit Semerci） I'm learning AngularJS and I don't understand the problem on Google Chrome and Opera. When I run this code Firefox it works fine. I will be glad if you have any thoughts on this issue. My AngularJs code is like this in app.js file (functi

AngularJs directive issue

Waqar Ahmed app.directive('ensureUnique', ['$http', function ($http) { return { require: 'ngModel', link: function (scope, ele, attrs, c) { scope.$watch(attrs.ngModel, function () { $http.post("http://localhost:xxxx/api/

AngularJs directive issue

ish I created two directives and included them in my html. However, only the first one executes and nothing after that. <div ng-app="myApp"> <div ng-controller="MyCtrl"> <div directive-one=""/> <div directive-two=""/> <div> Hello I

AngularJs directive issue

ish I created two directives and included them in my html. However, only the first one executes and nothing after that. <div ng-app="myApp"> <div ng-controller="MyCtrl"> <div directive-one=""/> <div directive-two=""/> <div> Hello I

AngularJS - directive/scope issue

Fooberichu I'm writing an old jQuery plugin and now want to keep similar functionality to angular directives. Long story short, I want it to convert the select tag to the following HTML. <div class="a"> <span class="b" /> <span class="c">{{text}}</span>

AngularJs directive issue

Waqar Ahmed app.directive('ensureUnique', ['$http', function ($http) { return { require: 'ngModel', link: function (scope, ele, attrs, c) { scope.$watch(attrs.ngModel, function () { $http.post("http://localhost:xxxx/api/

Angularjs scope issue with directive

username I have a directive that gives the rest of the html form. The instruction is given below Here is the html for the directive <div test input="{{guage.input}}" > </div> angular.module('test', []) .directive('test', function () {

AngularJS - directive/scope issue

Fooberichu I'm writing an old jQuery plugin and now want to keep similar functionality to angular directives. Long story short, I want it to convert the select tag to the following HTML. <div class="a"> <span class="b" /> <span class="c">{{text}}</span>

Google Pagedown AngularJS Directive

Samantha JT Star See the bottom of the question for an improved solution to this issue I've been trying for a while to get instructions on how pagedown works. This is the exact same editor used by stackoverflow. Stackoverflow made this code available here: htt

AngularJS directive isolation scope issue

Senox I'm new to AngularJS and trying to put together a small demo app. The part I'm trying to start working is as follows: The user enters the stock market code in a text field that is two-way bound to ng-model. Directives have click-binding functionality to

AngularJS Selectize directive, $digest issue

Turbo I'm having trouble using a directive with watch with the 3rd party plugin selectize. I've read a lot about $digest/$watch, but I'm still having issues. My example is below "works" but I'm trying to prevent $digest already in progresserrors. Maybe there i

angularjs directive not working (weird issue)

username Here is my app.js code (main js) var currentUserId; window.myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile', 'myApp.Registermdl', 'ngProgress', 'myApp.login', 'ngCookies', 'myApp.CreateUsermdl', 'myApp.viewMap', 'myApp.cr

AngularJS directive unit testing issue

Erhan I'm trying to populate the ng-repeat(home.html) with a directive called "card" as shown below. CardProvider is a Promise object that loads content using $http. Each directive in ng-repeat adds html content using ng-include. Each directive does something

angularjs directive not working (weird issue)

username Here is my app.js code (main js) var currentUserId; window.myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile', 'myApp.Registermdl', 'ngProgress', 'myApp.login', 'ngCookies', 'myApp.CreateUsermdl', 'myApp.viewMap', 'myApp.cr

AngularJS dynamic custom directive issue

Mahesh My custom directive does the onload page load just fine, but it doesn't work when added using append. At runtime, it doesn't display its content. HTML： <!doctype html> <html lang="en" ng-app="module1"> <head> <meta charset="UTF-8"> <title>Angular De

AngularJS directive isolation scope issue

Senox I'm new to AngularJS and trying to put together a small demo app. The part I'm trying to start working is as follows: The user enters the stock market code in a text field that is two-way bound to ng-model. Directives have click-binding functionality to

angularjs directive not working (weird issue)

username Here is my app.js code (main js) var currentUserId; window.myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile', 'myApp.Registermdl', 'ngProgress', 'myApp.login', 'ngCookies', 'myApp.CreateUsermdl', 'myApp.viewMap', 'myApp.cr

AngularJS dynamic custom directive issue

Mahesh My custom directive does the onload page load just fine, but it doesn't work when added using append. At runtime, it doesn't display its content. HTML： <!doctype html> <html lang="en" ng-app="module1"> <head> <meta charset="UTF-8"> <title>Angular De

Google Chrome bookmark issue

Keltari I'm having a weird problem with the Google Chrome bookmarks bar. Every time I install Google Chrome and sync with my GMail account, I add dozens of bookmarked folders to my bookmarks. It's just a duplicate folder and subfolder of one of my bookmarks fo

Google Chrome Unicode issue

Gayan Ranasinghe Hi I'm having issues with Google Chrome when reading sinhala unicode fonts. Just a week ago, Chrome suddenly couldn't render sinhala fonts. But for context it shows I will post the example Subject Update Chrome to the latest version. Type "chr

Google Chrome signing issue

Creative I am using ubuntu 17.10 and have chrome installed. The problem I'm facing is that I can't log into chrome to sync my bookmarks and browser history. I clicked "Sign in to chrome" immediately The browser freezes and closes like this. When I restart chro

Google Chrome bookmark issue

Keltari I'm having a weird problem with the Google Chrome bookmarks bar. Every time I install Google Chrome and sync with my GMail account, I add dozens of bookmarked folders to my bookmarks. It's just a duplicate folder and subfolder of one of my bookmarks fo

Google Chrome Unicode issue

Gayan Ranasinghe Hi I'm having issues with Google Chrome when reading sinhala unicode fonts. Just a week ago, Chrome suddenly couldn't render sinhala fonts. But for context it shows I will post the example Subject Update Chrome to the latest version. Type "chr

AngularJS UI grid issue with directive in cellTemplate

grab I got a head scratch! Seems like a fairly simple question...I'm using the ui-grid angular control and I'm trying to use a custom directive in the cellTemplate. I can successfully insert it into it, but the problem is that I can't properly bind to the dire

AngularJS Directive callback function timing issue

Michael Murata I stumbled upon an Angular issue that I don't understand or know how to fix. I would like to have a callback function in the controller that the instruction will call once it completes. This directive first changes some scope variables, then run

AngularJS country dropdown directive isolation scope issue

Michael Iglesias <country-select country_id="US"></country-select> <country-select country_id="user.country"></country-select> <country-select country_id="{{user.country}}"></country-select> angular.module('picmonic.directives.country-select', []) .directive(

AngularJS Directive callback function timing issue

Michael Murata I stumbled upon an Angular issue that I don't understand or know how to fix. I would like to have a callback function in the controller that the instruction will call once it completes. This directive first changes some scope variables, then run