Angularjs, 视野范围

Question

我这里有一个笨蛋 - http://plnkr.co/edit/PzSvKD9M4l1MKjlYluYm?p=preview

我在这里使用演示 json - https://api.myjson.com/bins/1hdr5

我正在使用 ng-view 和 ngRoute 来显示两个页面。

第一个是从 json 文件中提取的 stories/posts 列表。这显示了 json 文件中的部分内容 - 我限制了文本的数量。

我希望能够单击这些并打开一个新视图，显示所单击的 story/post 的完整内容。

我添加了一个 story.html，当在第一个视图中单击 story/post 时它会打开。

我的问题是将范围连接到 story.html 视图。我需要知道要加载的 josn 的正确部分以匹配单击的 story/post。

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'
    })

});

Answer 1

如果每个故事有不同的标题，那么在每个故事里面 ng-repeat，在 href 中你也可以在 link 中传递标题。你必须在 /story 之后在路由文件中声明一个标题变量，然后你可以通过 $routeparams 服务捕获动态标题的值。

你的 href 会像这样

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

你的路线是这样的：

.when('/story/:title'

在 Story Controller 中，您可以像这样捕捉标题：

$scope.selectedTitle = $routeParams.title

根据捕获的标题，您可以将所选故事放入包含故事的 objects 数组中，并将其显示给 html

查看更新的插件： http://plnkr.co/edit/b712OernQ8bNb6qUMEdx?p=preview

Angularjs, 视野范围

Angularjs, ng-view scope

angularjs

angularjs-scope

ng-view