AngularJS : 让 UI-路由器在没有 URL 的情况下工作

Question

我正在使用 Angular UI 路由器创建主从页面。我已经能够让它工作 - 当我点击主记录时，该记录的 ID 附加到 URL 并且详细视图显示该记录的详细信息。但是我有两个问题：

是否可以在不更改 URL 的情况下完成这项工作？据我了解，UI 路由器是关于状态变化的，不一定是 url 变化。但是，如果我从路由器状态中删除 url 属性，则不会显示详细信息。
与我的详细状态关联的模板是一个指令。目前，该指令使用 $stateParams 获取主记录的 ID。这使得它依赖于 UI 路由器。是否可以使用隔离范围将此 ID 向下传递？

以下是我的代码的关键部分：

路由器配置如下：

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

如上文#1 所述，如果我注释掉 url，则详细信息将停止显示。为什么？有没有办法在不更改 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;
}

请注意，控制器使用 $stateParams 捕获所选主记录的 ID。我很想通过切换到隔离范围来删除指令中的这种依赖性。因此，与 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

AngularJS : 让 UI-路由器在没有 URL 的情况下工作

AngularJS : Making UI-Router work without a URL

angularjs

angular-ui-router

angular-directive