Unable to generate links using ng-repeat

Question

Here is the code of my "app.js" :

 var app = angular.module('WebUI',[]);

app.config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

app.config(function($locationProvider){
    $locationProvider.html5Mode(true);
});

Here is the code of my controller :

    var Controller = function ($scope,$http)
    {
    $scope.thingsList=[];
    $http({method: 'GET', url: 'http://192.168.1.4/search'}).success(function(data)
    {
        results=data.results;
        angular.forEach(results,function(result)
        {
            $scope.thingsList.push(result.split('/')[1]);
        });     
    }).error(function(data){});
    }

Here is the code of my HTML page :

    <!DOCTYPE html>
<head>
    <title>All</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="controller.js" type="text/javascript"></script>
</head>
<body>
    <a href="home.html">HOME</a>
    <div id='content' ng-app='WebUI' ng-controller='Controller'>
        <li ng-repeat="thing in thingsList">
        <a href="home.html">{{thing}}</a>
        </li>   
    </div>
</body>
</html>

The point here is that I am generating the links using ng-repeat and the list that I get from my controller.js. But what happens is that : When I click "HOME" it gets redirects to the home page and when I click any of the "thing" i.e. generated link, then it throws an error :

Error: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///home/abc/home.html' cannot be created in a document with origin 'null'.

I tried searching online for this error but could not find anything useful. So if anybody knows where the problem is, please help :)

The application is huge, so unfortunately can't.Actually this problem is only with one page...on the previous page, it works fine :( — Vinil Narang, Jul 10 '14 at 05:11
Here is the reason to the problem you are facing http://stackoverflow.com/a/20079760/1690339 — DineshKP, Jul 10 '14 at 05:36

score 2 · Answer 1 · answered Jul 10 '14 at 05:25

2

A history state object with URL 'file:///home/abc/home.html' cannot be created in a document with origin 'null'.

Seems you're using angular routing on file urls, and without a server.

Try with a server.

answered Jul 10 '14 at 05:25

Raghavendra

5,281
4
36
51

Tried with a server, it freezes...i.e. the URL changes but doesn't redirect to the page. – Vinil Narang Jul 10 '14 at 05:32

score 1 · Accepted Answer · edited May 23 '17 at 11:51

Actually found the answer to my own question. I searched online and found that generating too many "file:///" links cause a security issue that's why they are not allowed.

Then I tried hosting it on a server http:// and testing, then the URL changed, but the page was not refreshed...so again error.

Then I found out that

 `app.config(function($locationProvider){
    $locationProvider.html5Mode(true);
});`

This portion of code was throwing errors due to which I was unable to use ng-route and other things.

But location needed this code to parse the get parameters in the URL, so I took reference from What's the most concise way to read query parameters in AngularJS? and I was able to pass the get parameters in the URL using another way like : url#/?target=bob and I was able to parse the parameters now.

So problem solved. $location was able to parse the parameters and I was also now able to access the links which earlier gave error.

score 0 · Answer 3 · answered Jul 10 '14 at 05:08

0

try using ng-href

https://docs.angularjs.org/api/ng/directive/ngHref

Hope this helps.

answered Jul 10 '14 at 05:08

link

2,480
1
16
18

score 0 · Answer 4 · answered Jul 10 '14 at 13:08

0

Try using window location:

<li ng-repeat="thing in thingsList">
    <a ng-click="gotoHome()">{{thing}}</a>
</li>

In JS,

$scope.gotoHome = function(){
  window.location="#/home";

                //Give your link above.
}

Hope it helps...

answered Jul 10 '14 at 13:08

Alagarasan M

907
8
16

I tried this way, but didn't work. But anyways found the problem :) – Vinil Narang Jul 11 '14 at 06:07

Unable to generate links using ng-repeat

4 Answers4