Создание динамической ссылки для повтора

Question

Создание динамической ссылки для повтора

0

У меня есть список статей в этом файле tableofcontent.html, и все они доступны для ссылок. Эта страница работает правильно и отображает список всех названий. Однако, когда я нажимаю ссылки, он переходит к правильному файлу шаблона, но ни одна из нужных данных не заполняется в файле article.html. Как получить данные для каждой ссылки, чтобы правильно отображаться на странице articles.html?

tableofcontent.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',
})

Seattlite 25 март 2016, в 23:41

Источник

Теги:

javascript

html

angularjs

1 ответ

Ещё вопросы

Kashyap Mukkamala · Answer 1 · 2016-03-25T22-19-00.000Z

Здесь на самом деле есть куча проблем, что вы хотите сделать, когда кто-то нажимает на список этих ссылок, вместо того, чтобы делать

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

Вы, вероятно, захотите сделать

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

Теперь, когда вы передаете идентификатор статьи, определение состояния модулей необходимо изменить, чтобы принять этот идентификатор статьи следующим образом.

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

Итак, теперь, когда вы нажимаете на статьи, вы должны увидеть сетевой запрос, который выглядит следующим образом: article/1234 где 1234 - это идентификатор выбранной статьи.

В этом примере вы всегда загружаете одни и те же данные article.json, но при взаимодействии с сервером вы можете получить доступ к выбранному идентификатору статьи, используя службу $stateParams которую вы можете просто ввести в свой контроллер.

Привет, я ценю совет. Я еще не уверен, работает ли это, я попробовал, и теперь мой сайт не будет перенаправлен в состояние статьи. Так что теперь у меня есть что-то еще, чтобы исправить!