AngularJS：讓UI-路由器的工作沒有一個URL

Question

我使用的角度UI路由器創建一個主從頁面。我已經能夠使它發揮作用 - 當我點擊主記錄，該記錄的ID被添加到URL和詳細信息視圖顯示此記錄的詳細信息。然而，我有兩個問題：

1. 是否有可能使這項工作沒有改變的網址？據我瞭解，UI路由器都是關於狀態的變化，不一定是網址的變化。但是，如果我從路由器狀態中刪除url屬性，則不會顯示詳細信息。
2. 我的詳細狀態相關聯的模板是一個指令。目前該指令使用$stateParams獲取主記錄的ID。這使它依賴於UI路由器。是否有可能使用隔離範圍傳遞此id？

這裏的是我的代碼的關鍵部分：

路由器的配置如下：

$stateProvider 
    .state('orderdetail', { 
     url: '/orders/:id', 
     template: '<my-order-detail></my-order-detail>' 
    }); 
} 

如＃1上面提到，如果我註釋掉的URL，然後詳細地停止出現。爲什麼？有沒有辦法讓這項工作沒有改變網址？

當主記錄中選擇更改狀態如下：

$state.go('orderdetail', { 
    id: vm.selectedOrderId 
}); 

下面是指令代碼，顯示細節：

angular.module('app.orderdetail', []); 

angular.module('app.orderdetail') 
    .directive('myOrderDetail', orderDetailDirective) 
    .controller('OrderDetailController', OrderDetailController); 

// ----- orderDetailDirective ----- 
orderDetailDirective.$inject = []; 

function orderDetailDirective() { 

    var directive = { 
     restrict: 'E', 
     templateUrl: 'components/orderdetail/orderdetail.html', 
     scope: { 
      id: '=' 
     }, 
     controller: 'OrderDetailController', 
     controllerAs: 'vm' 
    }; 

    return directive; 
} 

// ----- OrderDetailController ----- 
OrderDetailController.$inject = ['$stateParams']; 

/* @ngInject */ 
function OrderDetailController($stateParams) { 
    var vm = this; 
    vm.id = $stateParams.id; 
} 

注意控制捕獲的id所選主記錄使用$stateParams。我希望通過切換到隔離範圍來消除指令中的這種依賴關係。因此，與UI路由器狀態相關的模板應該如下所示：

template: '<my-order-detail data-id={{vm.id}}></my-order-detail>' 

這可能嗎？

Answer 1

萬一，我正確理解自己的目標，我們可以有這樣的template，經過id到指令（及其隔離範圍）。

還有就是a working plunker

$stateProvider 
    .state('orderdetail', { 
     url: '/orders/:id', 
     //template: '<my-order-detail></my-order-detail>', 
     template: '<my-order-detail data-id="$stateParams.id"></my-order-detail>', 
    }); 

只是將此添加到我們的代碼（所以我們不需要控制器，$stateParams已經在每個視圖狀態模板的範圍）：

.run(['$rootScope', '$state', '$stateParams', 
    function($rootScope, $state, $stateParams) { 
     $rootScope.$state = $state; 
     $rootScope.$stateParams = $stateParams; 
    } 
]) 

而且這是它的調用方式

<a ui-sref="orderdetail({id:1})"> 
<a ui-sref="orderdetail({id:2})"> 

檢查在action here