无法使用 ng-repeat 生成链接答案

【问题标题】：Unable to generate links using ng-repeat无法使用 ng-repeat 生成链接
【发布时间】：2014-08-31 08:57:57
【问题描述】：

这是我的“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);
});

这是我的控制器的代码：

    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){});
    }

这是我的 HTML 页面的代码：

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

这里的重点是我正在使用 ng-repeat 和从我的 controller.js 获得的列表生成链接。但是会发生什么：当我单击“HOME”时，它会重定向到主页，当我单击任何“事物”（即生成的链接）时，它会引发错误：

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'.

我尝试在线搜索此错误，但找不到任何有用的信息。所以如果有人知道问题出在哪里，请帮助:)

【问题讨论】：

你能创建一个 plunker 吗？
应用程序很大，所以很遗憾不能。实际上这个问题只有一页......在上一页上，它工作正常:(
这是您遇到问题的原因stackoverflow.com/a/20079760/1690339
是的，但在我的情况下不明白:(

标签： javascript angularjs

【解决方案1】：

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

您似乎在文件 url 上使用角度路由，并且没有服务器。

尝试使用服务器。

【讨论】：

尝试使用服务器，它冻结...即URL 更改但不重定向到页面。
这有点帮助。谢谢:)

【解决方案2】：

实际上找到了我自己问题的答案。我在网上搜索，发现生成太多"file:///" 链接会导致安全问题，因此不允许使用。

然后我尝试将其托管在服务器 http:// 上并进行测试，然后 URL 更改了，但页面没有刷新...所以又出错了。

后来发现

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

这部分代码抛出错误，导致我无法使用ng-route 和其他东西。

但是 location 需要这段代码来解析 URL 中的 get 参数，所以我参考了 What's the most concise way to read query parameters in AngularJS? 并且我能够使用另一种方式在 URL 中传递 get 参数：url#/?target=bob 并且我能够现在解析参数。

所以问题解决了。 $location 能够解析参数，我现在也能够访问之前给出错误的链接。

【讨论】：

【解决方案3】：

尝试使用ng-href

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

希望这会有所帮助。

【讨论】：

【解决方案4】：

尝试使用窗口位置：

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

在 JS 中，

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

                //Give your link above.
}

希望对你有帮助...

【讨论】：

我试过这种方式，但没有奏效。但无论如何都发现了问题:)