AngularJS：让UI的路由器工作，而一个URL [英] AngularJS : Making UI-Router work without a URL

问题描述

我使用的角度UI路由器创建一个主从页面。我已经能够使它发挥作用 - 当我点击一个主记录，该记录的ID被添加到URL和详细信息视图显示此记录的详细信息。不过，我有两个问题：

I am creating a master-detail page using the Angular UI router. I have been able to make it work - when I click on a master record, the id of this record is appended to the URL and the detail view shows the detail for this record. However I have two questions:

1. 是否有可能使这项工作没有UR​​L中的变化？据我了解的UI路由器是所有关于状态的改变，不一定网址的变化。但是，如果我从路由器状态删除url属性，那么没有详细显示出来。


2. 我的详细状态相关的模板是一个指令。目前，该指令得到使用 $ stateParams 主记录的ID。这使得依赖于UI路由器上。是否有可能通过这个ID使用上下分离的范围？

1. Is it possible to make this work without a change in the URL? As I understand it the UI router is all about state changes, not necessarily url changes. However, if I remove the url property from the router state, then detail doesn't show up.
2. The template associated with my detail state is a directive. Currently this directive gets the id of the master record using $stateParams. This makes it dependent on the UI router. Is it possible to pass this id down using isolate scope?

下面的是我的code的关键部分：

Here's are the key pieces of my code:

在路由器上配置如下：

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

如上＃1提到的，如果我注释掉的网址，然后详细停止出现。为什么？有没有一种方法，使这项工作，而无需在URL改变？

As mentioned in #1 above, if I comment out the url, then detail stops appearing. Why? Is there a way to make this work without having the URL to change?

在主记录中选择更改状态如下：

When the master record is selected I change the state as follows:

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

下面是该指令code，显示细节：

Here's the code for the directive that shows the detail:

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路由器状态相关联的模板应该是这个样子：

Note that the controller captures the id of the selected master record using $stateParams. I would love to remove this dependency in the directive by switching to isolate scope. So the template associated with the UI router state should look something like this:

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

这可能吗？

推荐答案

在的情况下，我是否正确地理解你的目的，我们可以有这样的 模板 ，路过的 ID 到指令的（和它的隔离范围）的

In case, I do understand your goal correctly, we can have this template, passing the id into directive (and its isolated scope).

有被工作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>',
    });

只是添加到了我们的code的（所以我们不需要控制器， $ stateParams 已经在每个视图状态模板的范围）

Just added this to our code (so we do not need controller, $stateParams are already in scope of each view state template):

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

这是它的调用方式

And this is the way its called

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

检查在这里 行动

Check that in action here

这篇关于AngularJS：让UI的路由器工作，而一个URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！