如何使用角度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

回答

相關問題