angularjs ui-sref address named view -
i make this:
.state('tabs.order', { url: "/order/:orderid", views: { 'orders-tab': { templateurl: "templates/orderdetail.html", controller: 'orderdetailcontroller' }, 'orders-all-tab': { templateurl: "templates/orderdetail.html", controller: 'orderdetailcontroller' } } })
then in view put conditional ui-sref in can choose tab addressed; this:
ui-sref="tabs.order({orderid:order.id}, <orders-tab or orders-all-tab?>)"
would possible? thanks
well, don't think there way yet specify view in ui-sref
, here starting point hope you..
firstly, routes:
app.config(function($stateprovider, $urlrouterprovider){ $urlrouterprovider.otherwise("/order/all-orders"); $stateprovider .state("order", { abtract: true, url:"/order", templateurl:"main.html" }) .state("order.ordertab", { url: "/order-details", templateurl: "orderdetails.html" }) .state("order.orderalltab", { url: "/all-orders", templateurl: "allorders.html" }); });
then, define main page (orders , order details) [main.html]
<div ng-controller="maincontroller"> <tabset> <tab ng-repeat="t in tabs" heading="{{t.heading}}" select="go(t.route)" active="t.active"> </tab> </tabset> <h2>view:</h2> <div ui-view></div> </div>
and page controller specify tab data:
app.controller("maincontroller", function($rootscope, $scope, $state) { $scope.go = function(route){ $state.go(route); }; $scope.active = function(route){ return $state.is(route); }; $scope.tabs = [ { heading: "order", route:"order.ordertab", active:true }, { heading: "all orders", route:"order.orderalltab", active:false }, ]; $scope.$on("$statechangesuccess", function() { $scope.tabs.foreach(function(tab) { tab.active = $scope.active(tab.route); }); }); });
all have next include orderid
.
here demo
Comments
Post a Comment