如何使用角ui-sref

Question

我有一个订单数据表与链接，以编辑订单，如果他们不是‘健康’。

我不知道如何使用ui-sref链接回我的编辑页面，传递给它特定的订单Id。(我应该使用ui-sref，对吧？在路由应用程序中使用href是作弊，不是吗？)

这是我得到的错误：

无法解析状态“layout.orders”中的“#/编辑列表/3”

下面是我的控制器中的代码片段：

OrderService.getOrders().then (
  function success(response) {
    vm.Orders = response;
      angular.forEach(vm.Orders, function (order, k) {
        if (!order.listing.Completed) {
          order.Health.push({
            message: "Missing listing info.",
            link: "/editlisting/" + order.listing.Id
          });
        };
     )};
   }
});

我现在所关心的就是

link: "/editlisting/" + order.listing.Id

html的一个片段：

<tr ng-repeat="health in order.Health">
  <td>
    <div ng-repeat="health in order.Health">
      <a ui-sref="{{health.link}}">{{health.message}}</a>
    </div>
  </td>
</tr>

我的路线如下：

        $stateProvider
            .state('layout.editlisting', {
                url: '/editlisting/:id',
                templateUrl: 'Content/js/apps/store/views/edit_listing.html',
                controller: 'editListingController',
                controllerAs: 'listingVm',
                data: { pageTitle: 'Edit Listing' }
            })

(如果我在某个地方输入了var或ref，不要太担心它。我的问题是实际的链接)

所以简单地说，这个：

<a ui-sref="{{health.link}}">{{health.message}}</a>

给我这个：

无法解析状态“layout.orders”中的“#/编辑列表/3”

虽然这样做很好：

<a href="{{health.link}}">{{health.message}}</a>

但这完全绕过了路由器，不是吗？

Answer 1

使用状态而不是URL，您可以按下面的方式传递id。我用“3”作为你的例子：

<a ui-sref="layout.editlisting({id:3})">{{health.message}}</a>

这里是一个前柱塞，我调整了以添加您的layout.editlisting ui-sref.如果单击编辑列表：

   <a ui-sref="layout.editlisting({id:3})">editlisting</a>

它将显示我创建的虚拟模板..。只是文字：

    .state('layout', {
        url: '/layout',
        template: '<div ui-view/>',
        abstract: true
      })
  .state('layout.editlisting', {
    url: '/editlisting/:id',
    template: '<h1>edit listing id = {{ vm.id }}</h1>',
    data: {
      pageTitle: 'Edit Listing'
    },
    controller: function($stateParams) {
      var vm = this;
      console.log('Edit listing controller' + $stateParams.id);
      vm.id = $stateParams.id;
    },
    controllerAs: 'vm'
  })

在控制器中，我使用$stateParams.id (即通过URL传递的id )检索id，并显示它为<h1>edit listing id = {{ vm.id }}</h1>