Question

我有一个使用ng-repeat从服务中显示的项目列表。所有这些项目都有一个“完整项目详细信息”链接（item.html）。一个通用页面，将显示更多信息。

将点击的项目数据传递给item.html的最佳方法是什么，以便显示的信息来自点击的项目？

HTML看起来像：

<div class="container" ng-app="myApp">
    <div ng-controller="ItemController">
        <div ng-repeat="item in data.details">
            <div class="wrapper">
                <h3>{{item.title}}</h3>
                <p>{{item.description}}</p>
                <a href="#myModal" class="btn" openmodal>Open modal</a>
                <a href="item.html">View full item details</a>
            </div>
        </div>
    </div>
</div>

角

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

myApp.factory('Data', function(){
    var Data = {};  
    Data.details = [
        {
            "id": 1,
            "title": "Item 1",
            "description": "Post 1 description - Nullam ac tellus sed mi laoreet placerat.",
            "more": "more info"
        },
        {   
            "id": 2,
            "title": "Item 2",
            "description": "Post 2 description - Cociis natoque penatibus et magnis dis parturient montes.",
            "more": "more info"

        },
        {
            "id": 3,
            "title": "Item 3",
            "description": "Post 3 description - Nullam ac tellus sed mi laoreet placerat.",
            "more": "more info"
        }
    ]
    return Data;
});

// Controller
function ItemController($scope, Data){
    $scope.data = Data;
}

提前致谢

修改

我为每条路线创建了路线，HTML页面，然后使用ng-view显示相应的内容。

请参阅下面的代码：

// Routes
myApp.config(function($routeProvider){
    $routeProvider
        .when('/', {
                templateUrl:"home.html"
        })
        .when('/task', {
                templateUrl:"item.html"
        })
})

// Controller
function ItemController($scope, $location, Item){
    $scope.data = Item;

    $scope.viewDetail = function(item) {
        $scope.currItem= item;
        $location.path('/item');
    }
}

现在index.html看起来像这样：

<div class="container">
    <ng-view></ng-view>
</div>

然后我为我的路线创建了单独的文件：

home.html的

<div class="container" ng-app="myApp">
    <div ng-controller="ItemController">
        <div ng-repeat="item in item.details">
            <h3>{{item.title}}</h3>
            <a ng-click="viewDetail(item)">View full item details</a>
        </div>
    </div>
</div>

item.html

<div class="container" ng-app="myApp">
    <div ng-controller="ItemController">
        <h3>{{currItem.title}}</h3>
        <p>{{currItem.description}}</p>
    </div>
</div>

home.html中的我的链接（查看完整项目详细信息）使用ng-click传递单击的“item”对象现在我想在item.html中使用这个item对象 console.log（item）给了我正确的对象。

我尝试在item.html中使用“currItem”来显示正确的数据。它不起作用。

不确定我在这里缺少什么？

Answer 1

这实际上取决于您如何构建您的网站以及您希望应用程序如何流动。你有很多选择，第一个是最有角度的选择。

使用the $route service和ngView。
将所有内容保持在一页上。您需要将<a href="item.html">替换为显示/隐藏单独div的<span ng-click="showDetails(item)">，其中包含可绑定到$scope.currentItem的item.html内容。 $scope.showDetails看起来像这样：$scope.showDetails = function (item) { $scope.currentItem = item }，而item.html会放在像<div ng-show="currentItem != undefined">...</div>或类似的容器中。
将<a href="item.html">更改为<a href="item.html?itemId={{item.id}}">，向新页面发出请求。这将需要向服务器发送大量额外请求（不仅要加载item.html，还要读取location.search，然后将数据（您在上一个请求中已经拥有的数据）加载回新页面。

修改

如果您要使用ngView，则必须修改ItemController以获取$route参数，然后您将使用该参数来检查项ID：

app.controller('ItemController', function ($scope, $route) { // TODO load the item from some service or using ajax, here's the id: console.log($route.current.params.id); });

Answer 2

根据index.html的作用，您可以将其作为参数传递。例如

index.html?title={{item.title}}&id={{item.id}}

然后在index.html中使用javascript获取查询字符串并解析它以供显示。

不确定您是否要求将其实现为不同的页面，还是可以使用不同的视图？

如果它可以作为单独的视图实现，那么有多个选项：

您可以使用共享服务将数据传递给另一个控制器并将其绑定到新控制器的模型。有关服务的详细信息，请参阅以下链接http://docs.angularjs.org/guide/dev_guide.services.creating_services
您可以使用$ scope变量为所选项目创建新模型并使用现有控制器。

角度传递数据到单独的页面

2 个答案: