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

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.html 中使用这个 item 对象 console.log(item) 给了我正确的对象。

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

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

Answer 1

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

1. 利用the $route service和ngView。

2. 将所有内容保持在一个页面上。您需要将<a href="item.html"> 替换为<span ng-click="showDetails(item)"> 之类的东西，这将显示/隐藏一个单独的div，其中包含可以绑定到$scope.currentItem 的item.html 的内容。 $scope.showDetails 看起来像这样：$scope.showDetails = function (item) { $scope.currentItem = item }，而 item.html 将位于类似：<div ng-show="currentItem != undefined">...</div> 或类似的容器中。

3. 通过将<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 变量为所选项目创建新模型并使用现有控制器。