angularjs ui-sref 地址命名视图答案

【问题标题】：angularjs ui-sref address named viewangularjs ui-sref 地址命名视图
【发布时间】：2015-06-19 18:52:54
【问题描述】：

我想做这样的事情：

.state('tabs.order', {
    url: "/order/:orderId",
    views: {
        'orders-tab': {
            templateUrl: "templates/orderDetail.html",
            controller: 'OrderDetailController'
        },
        'orders-all-tab': {
            templateUrl: "templates/orderDetail.html",
            controller: 'OrderDetailController'
        }
    }
})

然后在我看来，我会放置一个有条件的 ui-sref，我可以在其中选择要处理的选项卡；像这样：

ui-sref="tabs.order({orderId:order.ID}, <orders-tab or orders-all-tab?>)"

这可能吗？谢谢

【问题讨论】：

如何选择视图？基于什么？
问题不在于条件，而在于如何在ui-sref语法中指定命名视图

标签： angularjs ui-sref

【解决方案1】：

好吧，我认为目前还没有任何方法可以在 ui-sref 中指定视图，但这里是一个起点，希望对您有所帮助..

首先，路线：

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

然后，定义您的主页（订单和订单详情）[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>

和页面控制器指定标签数据：

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

接下来您要做的就是添加orderID。
这是demo

【讨论】：