Question

我在AngularJS项目中使用ui-router，并且配置了路由，因此不同的模板和控制器用于同一个URL。

.state('app.communications', {
    url: '/communications',
    template: '<div ui-view></div>',
    controller: function($rootScope, $state, $log) {
        if ($rootScope.hasRole(BUYER_ROLE)) {
            $log.info('Routing to Buyer Communications...');
            $state.go('app.communications.buyer');
        } else if ($rootScope.hasRole(SUPPLIER_ROLE)) {
            $log.info('Routing to Supplier Communications...');
            $state.go('app.communications.supplier');
        }
    },
    resolve: {
        Connection: 'Connection',
        connections: function (Connection) {
            return Connection.query().$promise;
        }
    }
})

.state('app.communications.buyer', {
    url: '',
    controller: 'BuyerConnectionsController',
    templateUrl: 'tpl/buyer_communications.html'
})

.state('app.communications.supplier', {
    url: '',
    controller: 'ConnectionsController',
    templateUrl: 'tpl/communications.html',
    resolve: {
        SampleRequest: 'SampleRequest',
        sampleRequests: function(SampleRequest) {
            return SampleRequest.query().$promise;
        }
    }
})

.state("app.communications.supplier.shares", { url: "/shares" })
.state("app.communications.supplier.requests", { url: "/sample-requests" })

这正如我所愿。但是，它确实有一个问题。我在左侧导航菜单中有一个ui-sref =“app.communications”。当我第一次点击它时，视图加载就好了。当我第二次点击它时，会加载一个空白屏幕。我发现添加ui-sref-opts =“{reload：true}”解决了这个问题，但我必须这样做似乎很奇怪。

我遇到的第二个问题是在我的'tpl / communications.html'模板中为标签添加了书签功能。我的控制器中有以下设置。

$scope.tabs = [
    { title:'Connections', route:'app.communications.supplier', content:'communications.html'},
    { title:'Shares', route:'app.communications.supplier.shares', content:'shares.html'},
    { title:'Sample Requests', route:'app.communications.supplier.requests', content:'sampleRequests.html'}
];

$scope.active = function(route){
    return $state.is(route);
};

$scope.$on("$stateChangeSuccess", function(event, toState, toParams, fromState, fromParams) {
    $scope.tabs.forEach(function(tab) {
        tab.active = $scope.active(tab.route);
        console.log(tab);
    });
});

我正在使用ui-bootstrap渲染标签：

<tabset class="tab-container" justified="true">
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ui-sref="{{tab.route}}">
        <div ng-include="tab.content"></div>
    </tab>
</tabset>

我可以点击标签就好了，网址会按预期更改。但是，如果我在地址栏中刷新页面（使用/ communications / shares等URL），则会调用“$ stateChangeSuccess”事件两次。第一次，它是正确的状态（app.communications.supplier.shares），但第二次是第一个选项卡（app.communications.supplier）。我试了很多东西试图阻止第二件事发生，但没有成功。

在处理像这样的子状态时，是否有人知道如何使标签书签功能起作用？

如果我没有父母委派的子控制器，一切正常。

使用子视图时的ui-router和可收藏的选项卡

0 个答案: