Question

我正在做一个基本的角度示例，它显示了列表视图和详细视图。这是plunkr：http://plnkr.co/edit/YduJGYQr4lFGK8EXdSXs 它目前通过在链接中使用ng-click =“select（page）”而不是在RouteParams中指定的：pageId来显示细节，因此如果您使用后退按钮它将无法工作。

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

Answer 1

虽然@musically_ut示例有效，但我不相信你接近问题的方式是推荐的方法。您的方法将列表视图与详细信息视图紧密结合在一起。

更好的方法是拥有专用的列表控制器/视图和专用的详细信息控制器/视图。在您的详细信息控制器中，您将使用您的路线参数来访问项目详细信息，或者通过调用服务器，或者如果您必须将所有内容都放在内存中，然后将您的页面阵列移动到可以是的服务/工厂中由列表控制器和详细信息控制器共享。这样两种视图都可以解耦，您可以在任何地方有效地重复使用它们。

根据@charlietfl comment，官方的例子应该指出你正确的方向。

Answer 2

如果我理解正确，您想要更改路线，但又不想使用URL来确定应用程序的状态？无法从URL中序列化状态转义并从中撤消，因为用户可以直接从URL访问应用程序。

这是一个使用角度路由的工作演示，$routeParams保存从currentPage page.linktext  <div class="container" ng-controller="appCtrl"> <div class="row"> <div class="span12"> <div id="messagesDiv"> <ul>  <li ng-repeat="page in pages"><a href="#/pages/{{page.linktext}}">{{page.linktext}}</a></li> </ul>  <div ng-view></div> </div> </div> </div> app.config(function($routeProvider){ $routeProvider. when('/pages/:pageId', {templateUrl:'content.html'}). when('/content', {template: '<div>No link selected</div>'}). otherwise({redirectTo:'/content'}); // <-- `redirectTo` cannot take a template中检索$scope.pages = [ { linktext: 'first', title: 'first title', content: 'first content' }, { linktext: 'second', title: 'second title', content: 'second content' } ]; // Set up a watch to notice whenever the user clicks a link and route changes $scope.$watch(function () { return $routeParams.pageId }, function (newVal) { if (typeof newVal === 'undefined') return; // Pick the content for the page using the `linktext` of the pages and `pageId` $scope.currentPage = $scope.pages.filter(function (p) { return p.linktext === newVal; })[0]; });

以下是评论的更改。

<强>模板

{{1}}

模块配置

{{1}}

<强>控制器

{{1}}

Answer 3

选择对象时，可以将对象放入持有者服务中，并调整位置路径。然后路由器将带您进入详细信息。在详细信息的控制器中，您只需从“持有者”服务中选择对象。

例如：

我的“列表”视图中的摘录：

... 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() : {};

    //...

})

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

3 个答案: