从表格行到项目

时间:2016-06-15 19:52:42

标签: angularjs routing

我有一个包含商品表(又名商品)的页面。我需要在每一行添加编辑列表按钮,这将转到我可以编辑单个列表(产品)的新页面。

所以:列表>编辑列表

HTML只是模板 - 我的SPA内容区域中的HTML代码段。 (我之所以提到这一点是因为我必须确保我的页面链接到他们正确的控制器 - 我的片段/模板上没有ng-controller = - 它们位于页面的上方。)

无论如何,这就是我要将列表路由到编辑列表:

listings.html:

    <table class="table table-striped table-bordered table-hover table-checkable order-column"
           id="listings-table"
           datatable="ng"
           dt-options="listingVm.dtOptions"
           dt-column-defs="listingVm.dtColumnDefs">
        <tr ng-repeat="listing in listingVm.listings">
            <td>{{ listing.Title }}</td>
            <td>{{ listing.Description }}</td>
    <!-- my addition: -->
            <td><a ng-click="listingVm.editListing(listing.Id)"><i class="fa fa-edit"></i></a></td>
        </tr>
    </table>

listingsController.js:

    vm.editListing = function (listingId) {
    // I'll figure out how to get the data later
    //$http.get('/api/Listing/').then(function (response) {
    //  console.log(response);
    $location.path('/editlisting/' + listingId);
    //}, function (response) {
    //});

    }

router.js:

            .state('layout.listing', {
                url: '/listing',
                templateUrl: '/Content/js/apps/store/views/listing.html',
                controller: 'listingController',
                controllerAs: 'listingVm',
                data: { pageTitle: 'Listings' }
            })
    // I added this:
            .state('layout.editlisting', {
                url: '/editlisting/:id',
                templateUrl: '/Content/js/apps/store/views/edit_listing.html',
                controller: 'editListingController',
                controllerAs: 'listingVm',
                data: { pageTitle: 'Edit Listing' }
            })

我呃......我被卡住了。我真的不知道这应该如何运作。

做什么会立即重定向到我的默认仪表板页面:/#/ dashboard,如果找不到该名称的页面,我希望它能做到这一点。 ( 没有错误,只是重新路由到默认值)

看起来我可能正在使用两种路由方式?

例如。如果我的路由器中有状态,我可以这样做:

<a ui-sref="layout.editlisting">

1 个答案:

答案 0 :(得分:0)

让我们做出一个干净的答案,而不是评论。

$location.path会发送不带参数的网址。

$location.url('/editlisting/' + listingId);

应该按照意图行事。

要检索接收控制器内的参数,首先必须注入$ stateParams,其中包含请求中的命名参数:

.controller('YourCtrl', ['$stateParams', function($stateParams) {
    this.listingId = $stateParams.listingId;
}