AngularJS, Only Runs Correctly In Firefox Why?

I'm using angularjs. The example I have done works perfectly in firefox, but does not work any other browser. The error that appears in other browsers when I press add picture bott

Solution 1:

You shouldn't be using the src attribute with Angular Expressions.

Use ngSrc - as described in the docs.

<img class="media-object" ng-src="{{ gif.url }}"> 

Edit: In your modalpanel you'll need to make sure the form that is beeing submitted is valid

Moved here from comment:

The reason why it won't work without the http:// is probably because the input field for the URL is of type="url" and urls are not valid with http/https. So it actually is a different problem here. The form should be validated before adding an image. :)

Solution 2:

When you call partials in Angular, it makes a cross domain request. Firefox allows it, Chrome and others don't.

So, you have to launch a local web server to make it run on all browsers (Apache, with Xampp / Mamp, whatever).

Solution 3:

Your script only runs on firefox because firefox allow cross origin requests (AJAX requests) and chrome will not allow cross origin request because of security policies.

So in order to run your script in chrome You have to disable web security in chrome

To disable web-securities in chrome:

1. kill the chrome process
2. press "ctrl+R" to open run menu
3. type "chrome --disable-web-security" without quotes and press enter
4. then you will be able to run your script

Please let me know If you have any issues with other browsers?