正在为ng重复创建动态链接

Creating dynamic link for ng-repeat

本文关键字：创建 动态 链接 ng      更新时间：2023-09-26

我在这个目录.html文件中有一个文章列表，它们都是可点击的链接。此页面工作正常，并且显示了所有标题的列表。不过，当我点击链接时，它会转到正确的模板文件，但article.html文件中没有填充任何正确的数据。如何使每个链接的数据正确显示在articles.html页面中？

tableofcont.html

<div class="row" ng-controller="TableofContentController">
    // non relevant code removed
    <ul>
        <li ng-repeat="article in data">
            <a ui-sref="article">{{article.title}}</a>
        </li>
    </ul>

article.html

<div class="row" ng-controller="ArticlesController">
    //  non relevant code removed
    <h3>{{article.title}}</h3>
    <h6>Author: {{article.author}} on {{article.date}}</h6>
    <p>{{article.body}}</p> 
    //etc

app.js

// service to retrieve and share data
articleApp.factory('Data', function ($timeout, $http) {
    var articles = {
        fetch: function() {
            return $timeout(function() {
                return $http.get('articles.json')
                .then(function(response) {
                    return response.data;
                });
            }, 30);
        }
    }
    return articles;
});

articleApp.controller('TableofContentController', function ($scope, Data) {
    Data.fetch().then(function(data) {
        $scope.data = data;
    });
});
articleApp.controller('ArticlesController', function ($scope, Data) {
    Data.fetch().then(function(data) {
        $scope.data = data;
    });
});

也在app.js 中

// table of content state
.state('tableofcontent', {
    url: '/index',
    templateUrl: 'templates/tableofcontent.html'
})
// main articles page state
.state('article', {
    url: '/{{article.title}}',
    templateUrl: 'templates/articles.html',
    controller: 'ArticlesController',
    controllerAs: 'articles',
})

这里实际上有很多问题，你想做的是，当有人点击这些链接的列表时，而不是进行

<a ui-sref="article">{{article.title}}</a>

你可能想做

<a ui-sref="article({id : article.id})">{{article.title}}</a>

现在您已经传递了文章的id，需要修改模块状态定义以接受该文章id，如下所示。

.state('article', {
    url: 'article/:id',
    templateUrl: 'templates/articles.html',
    controller: 'ArticlesController',
    controllerAs: 'articles',
})

因此，现在当您点击文章时，您应该会看到一个网络请求，如下所示：article/1234，其中1234是所选文章的id。

在本例中，您似乎总是加载相同的article.json数据，但在与服务器交互时，您可以使用$stateParams服务访问所选的文章id，您只需将其注入控制器即可。

相关文章：