2015-05-12 7 views
0

У меня есть plunker здесь - http://plnkr.co/edit/PzSvKD9M4l1MKjlYluYm?p=previewAngularjs, нг-вид сфера

Я использую демо JSON здесь - https://api.myjson.com/bins/1hdr5

Я использую нг ракурс и ngRoute для отображения двух страниц.

Первый - список историй/сообщений, извлеченных из json-файла. Это отображает часть содержимого в json-файле - я ограничил количество текста.

Я бы хотел щелкнуть по ним и открыть новое представление, отображающее полный контент этой истории/сообщения.

Я добавил story.html, который открывается при щелчке по истории/сообщению на первом представлении.

Моя проблема заключается в подключении области к представлению story.html. Мне нужно знать правильную часть josn для загрузки, чтобы соответствовать истории/сообщению, которые были нажаты.

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

app.service('myService', function ($http, $q) { 

    var deferred = $q.defer(); 
    $http.get('https://api.myjson.com/bins/1hdr5').then(function (data) { 
     deferred.resolve(data); 
    }) 

    this.getStory = function() { 
     return deferred.promise; 
    } 
}) 

    .controller('myCtrl', function ($scope, myService) { 
    var promise = myService.getStory(); 
    promise.then(function (data) { 
     $scope.stories = data.data.stories; 
    }) 

}) 

/* 
    .controller('storyCtrl', function ($scope, myService) { 
    var promise = myService.getStory(); 
    promise.then(function (data) { 
     $scope.stories = data.data.stories; 
    }) 

}) */ 


    .config(function ($routeProvider) { 
    $routeProvider 

    // route for the home page 
    .when('/', { 
     templateUrl: 'home.html', 
     controller: 'myCtrl' 
    }) 

     .when('/story', { 
     templateUrl: 'story.html', 
     controller: 'storyCtrl' 
    }) 

}); 

ответ

1

Если у вас есть другое название каждой истории, то в каждой истории внутри нг-повтора, в HREF вы можете передать заголовок тоже в ссылке. Вы должны объявить переменную для заголовка в файле маршрута после/story, а затем вы можете поймать значение динамического заголовка службой $ routeparams.

ваш HREF будет как этот

data-ng-href="#story/{{story.Title}}" 

ваш маршрут будет выглядеть следующим образом:

.when('/story/:title' 

контроллер рассказа вы можете поймать название так:

$scope.selectedTitle = $routeParams.title 

основе вы можете выбрать выбранную историю в массиве объектов, содержащих истории, и показать их в html

увидеть обновленный plunker: http://plnkr.co/edit/b712OernQ8bNb6qUMEdx?p=preview

+0

Благодаря Abhijeet Thats выглядит великолепно, но plunker не работает так было интересно, если это действительно работает – ttmt

+0

ой .. я проверил ссылку только сейчас его работу, нажав на любую историю приведет вас к другому взгляду с подробностями истории. –

+0

безупречное спасибо Abhijeet – ttmt

Смежные вопросы