如何使用角度ui-sref

我有一张订单数据表，带有链接以编辑订单，如果它们不“健康”。如何使用角度ui-sref

我不知道如何使用UI-SREF链接回我的编辑页面，通过它的特定顺序编号。（？我应该使用的用户界面，SREF，正确的路由应用是一种欺骗行为是不是使用的href）

这是错误我得到：

无法解析“＃/ editlisting/3' 状态‘layout.orders’

这里的代码在我的控制器的一个片段：

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>

给了我这样的：

无法解析 '＃/ editlisting/3' 状态' layout.orders'

虽然这工作得很好：

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

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

来源

2016-07-05 DaveC426913

'ui-sref'需要一个状态的名称而不是url。 http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref – MiTa

使用状态，而不是URL的，你可以通过ID如下。我使用 '3' 像你的一个例子：

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

这里是一个previous plunker，我扭捏添加layout.editlisting UI-SREF ...如果你点击editlisting：

<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检索到的ID（即一个由URL传递），并使其显示出来<h1>edit listing id = {{ vm.id }}</h1>

来源

2016-07-05 20:32:54 Gregori

如何使用角度ui-sref

回答

相关问题