wie angular ui-sref zu verwenden

Question

Ich habe eine Tabelle mit Bestelldaten mit Links zum Bearbeiten der Bestellung, wenn sie nicht "gesund" sind.

Ich bin mir nicht sicher, wie man den ui-sref benutzt, um zurück zu meiner Bearbeitungsseite zu verbinden, indem ich ihm die spezifische Bestellnummer übergebe. (? Ich soll ui-Sref verwenden, direkt Mit href in einer gerouteten App betrügt ist es nicht)

Dies ist der Fehler, den ich bekommen:

konnte nicht lösen ‚#/editlisting/3' vom Zustand '' layout.orders

Hier ist ein Code-snippet in meinem Controller:

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

Alles, was ich jetzt bin besorgt ist

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

Ein Ausschnitt des 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> 

wie Meine Route aussieht:

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

(Wenn ich einen var oder ref irgendwo vertippt haben, sorgen Sie sich nicht zu viel darüber. Mein Problem ist, mit der tatsächlichen Verknüpfung)

Also, kurz gesagt, dies:

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

gibt mir dies:

kann nicht lösen '#/editlisting/3' vom Zustand ' layout.orders'

dies zwar funktioniert:

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

Aber das ist die Umgehung des Routers komplett, nicht wahr?

Answer 1

Verwenden Sie den Status anstelle der URL und Sie können die ID wie folgt weitergeben. Ich bin mit '3' als ein Beispiel, wie Sie das:

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

Hier ist ein previous plunker, dass ich Ihr layout.editlisting ui-sref ... hinzuzufügen gezwickt, wenn Sie editlisting klicken:

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

es wird die Dummy-Vorlage angezeigt ich habe ... nur Text:

.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' 
    }) 

In der Steuerung abgerufen ich die id $ stateParams.id mit (dh die durch die URL übergeben eins) und ich zeige es <h1>edit listing id = {{ vm.id }}</h1>