Javascript angular.js中RouteParam中的项目详细信息

我正在做一个基本的角度示例，其中显示了列表视图和细节视图。 以下是普朗克： 它当前通过在链接中使用ng click=“select（page）”而不是在RouteParams中指定的：pageId来显示详细信息，因此如果使用back按钮，它将无法工作

---

基本上，我知道如何从route参数获取：pageId，但不知道如何使用它选择特定项目。如何从对象中的值获取对象？

如果我理解正确，您希望更改路由，但不希望使用URL确定应用程序的状态？由于用户可以直接从URL访问应用程序，因此无法从URL中的序列化状态中逃脱并从中检索

这是一个工作演示，它使用angular的路由和

$routeParams

保存一个从

页面检索
currentPage
。linktext

：

以下是带有注释的更改

模板

---

虽然@musicaly_ut示例有效，但我不认为您处理问题的方式是推荐的解决方法。您的方法将列表视图与详细信息视图紧密结合

更好的方法是使用专用的列表控制器/视图和专用的详细信息控制器/视图。然后，在详细信息控制器内，您将使用route param访问项目详细信息，或者通过调用服务器，或者如果您必须将所有内容都存储在内存中，则将页面数组移动到列表控制器和详细信息控制器都可以共享的服务/工厂中。通过这种方式，两个视图都是解耦的，您可以在任何您喜欢的地方有效地重用它们

---

根据@charlietfl，官方示例应该为您指出正确的方向。

当您选择对象时，您可以将对象放入持有者服务中，并调整位置路径。路由器会带你进入细节。在细节的控制器中，您只需从“持有者”服务中拾取对象

例如：

我的“列表”视图中的代码段：

... some stuff here...

<tr ng-repeat="msg in msgs">
   ... and here ...

   ... here's an edit link that takes you to the detail page ...
   <a href="" ng-click="edit(msg)">
     <span class="glyphicon glyphicon-edit"/>
   </a>
</tr>

我的服务：

.service('Holder', function () {

    var _data;

    return {

        msg: function (msg) {
            if (msg) {
                _data = msg;
            }
            else {
                return _data;
            }
        }
    }
})

我的详细信息控制员：

    .controller('MsgCtrl', function ($scope, $location, $routeParams, Holder) {

    //...

    $scope.msg= $routeParams.msgId ? Holder.msg() : {};

    //...

})

---

大部分都是来自docs站点…刚刚在

$routChangeStart

事件中添加的感谢charlieftl，但我试图基于RouteParams解析json格式的数据，而这个示例显示了RouteParams本身。您是否可以解释一下页面中哪些不起作用，或者您希望它如何工作？我想如果我们确切地知道你的目标是什么，回答你会更容易些。从音乐上感谢你，变量“newVal”是什么在本例中表示？@user1469779接受两个参数：第一个参数是每个

$digest

周期要计算的表达式，第二个参数是函数，每当表达式更改时，该函数将使用表达式的

newValue

和

oldValue

执行。在本例中，第一个函数返回当前的

pageId

，第二个函数使用新的pageId（保存在

newValue

）更新

currentPage

。

... some stuff here...

<tr ng-repeat="msg in msgs">
   ... and here ...

   ... here's an edit link that takes you to the detail page ...
   <a href="" ng-click="edit(msg)">
     <span class="glyphicon glyphicon-edit"/>
   </a>
</tr>

     $scope.edit = function (msg) {
        Holder.msg(msg);
        $location.path('/messages/' + msg.id);
    };

.service('Holder', function () {

    var _data;

    return {

        msg: function (msg) {
            if (msg) {
                _data = msg;
            }
            else {
                return _data;
            }
        }
    }
})

    .controller('MsgCtrl', function ($scope, $location, $routeParams, Holder) {

    //...

    $scope.msg= $routeParams.msgId ? Holder.msg() : {};

    //...

})