无法使用ng-repeat生成链接

10 浏览
0 Comments

无法使用ng-repeat生成链接

这是我的“app.js”代码：\n

 var app = angular.module('WebUI',[]);
app.config(function($httpProvider){
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
app.config(function($locationProvider){
    $locationProvider.html5Mode(true);
});

\n这是我的控制器代码：\n

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

\n这是我的HTML页面代码：\n

    

    All
    
    
    


    HOME
        
  • 
        {{thing}}
        
    •

    \n问题在于我使用ng-repeat和从我的controller.js获取的列表生成链接。但是问题是：当我点击“HOME”时，它会重定向到主页，当我点击任何一个“thing”，即生成的链接时，它会抛出一个错误：\n

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

    \n我尝试在线搜索这个错误，但找不到有用的信息。所以如果有人知道问题出在哪里，请帮忙 🙂

    0

    3 答案

    0 Comments

    无法使用ng-repeat生成链接的原因可能是因为ng-repeat指令在生成链接时存在问题。解决方法是尝试使用ng-href指令替代ng-repeat。

    ng-href指令是AngularJS中用于生成链接的指令。它可以动态地根据表达式生成链接，并且在表达式求值为false时，不会生成任何链接。这使得ng-href指令在生成链接时更加灵活和可靠。

    以下是使用ng-href指令替代ng-repeat的示例代码：

    在上面的代码中，ng-repeat指令被替换为一个普通的div元素，并且在该div元素下使用ng-href指令生成链接。ng-href指令的表达式使用了items数组中的url属性和text属性来动态生成链接的URL和文本。

    使用ng-href指令生成链接时，需要注意确保表达式的求值结果为字符串类型。如果表达式的求值结果为null、undefined或者一个对象，ng-href指令将不会生成任何链接。

    希望这些内容能够帮助你解决无法使用ng-repeat生成链接的问题。如果你需要更多关于ng-href指令的信息，可以参考AngularJS的官方文档：https://docs.angularjs.org/api/ng/directive/ngHref。

    0
    0 Comments

    在搜索了一些在线资源之后，我找到了解决自己问题的方法。我发现生成过多的"file:///"链接会导致安全问题，因此这些链接是不被允许的。然后，我尝试将它托管到一个服务器http://上进行测试，然而URL改变了，但页面却没有刷新...所以仍然报错。

    然后，我发现了以下代码片段:

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

    这部分代码会引发错误，导致我无法使用ng-route和其他功能。但是在定位中，这段代码需要解析URL中的查询参数，所以我参考了What's the most concise way to read query parameters in AngularJS?，通过另一种方式传递了URL中的查询参数，例如：url#/?target=bob，现在我可以解析这些参数了。

    问题解决了，$location现在能够解析这些参数，我也能够访问之前报错的链接了。

    0
    0 Comments

    无法使用ng-repeat生成链接的问题出现的原因是在没有服务器的情况下，使用了文件URL进行angular路由。而解决方法是尝试使用服务器进行操作。

    解决方法的具体步骤如下：

    1. 在本地安装一个服务器，可以使用诸如Apache、Nginx等软件来搭建一个简单的服务器环境。

    2. 将项目文件放置在服务器的根目录下，确保文件可以通过服务器进行访问。

    3. 启动服务器，确保服务器正常运行。

    4. 在浏览器中访问服务器的URL，例如http://localhost:8080。

    5. 确保服务器能够正确响应请求，并且页面能够正常加载。

    6. 确保ng-repeat指令被正确使用，且数据能够正确显示在页面上。

    以上就是解决"Unable to generate links using ng-repeat"问题的原因和解决方法。通过使用服务器来进行操作，可以解决由于缺乏服务器而导致无法生成链接的问题。

    0