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

Question

I am doing a basic angular example which shows a list view and a detail view. Here is the plunkr: http://plnkr.co/edit/YduJGYQr4lFGK8EXdSXs It currently is showing the detail by using the ng-click="select(page)" in the link rather than the :pageId specified in the RouteParams, so if you used the back button it wouldn't work.

Basically I know how to get the :pageId from the route param, but not how to select the specific item with it. How would I get the object from a value in the object?

Answer 1

While @musically_ut example works, I do not believe the way you are approaching the problem is the recommended way to go about it. Your approach tightly couples the list view with the details view.

A better approach would be to have a dedicated list controller/view, and a dedicated details controller/view. Inside your details controller you will then use your route param to gain access to the item detail, either via a call to your server, or if you have to have everything in memory, then move your pages array into a service/factory that can be shared by both the list controller and details controller. This way both views are decoupled and you could effectively re-use them anywhere you like.

As per @charlietfl comment , the official example should point you in the right direction.

Answer 2

If I understand you correctly, you want to change the route, but do not want to use the URL to determine the state of your application? There is no way of escaping from serializing state in the URL and retreiving it from there because the user may access the app directly from the URL.

This is a working demo which uses angular's routing and $routeParams to save an retrieve the currentPage from the page.linktext : http://plnkr.co/edit/WnJtiqhvUKTKN2PSvwtc?p=preview

Here are the changes with comments.

Template

  <!-- language: kept the `appCtrl` outside so that it controls all the
       templates loaded in place of 'ng-view'-->
  <div class="container" ng-controller="appCtrl">
    <div class="row">
        <div class="span12">
            <div id="messagesDiv">
                <ul>
                    <!-- have removed the `ng-click` -->
                    <li ng-repeat="page in pages"><a href="#/pages/{{page.linktext}}">{{page.linktext}}</a></li>
                </ul>

                <!-- moved the content of the partials to content.html -->
                <div ng-view></div>
        </div>
    </div>
</div>

Module configuration

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

Controller

$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];
});

Answer 3

When you select the object, you can put the object in a holder service, and adjust the location path. The router will then take you to the detail. In the detail's controller, you then simply pick the object from the 'holder' service.

So for example:

snippet from my 'list' view:

... 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>

my controller behind the list of objects:

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

my service:

.service('Holder', function () {

    var _data;

    return {

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

my detail controller:

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

    //...

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

    //...

})