角度,UI路由器,嵌套导航和选项卡问题

时间:2015-06-18 16:25:26

标签: javascript angularjs

我正在尝试使用Angular,ui-router和tabs构建导航系统。我几乎有它工作,但我有一些奇怪的行为。

顶部有一个导航栏形式的顶级导航。路由默认为“仪表板”。 “仪表板”的“级别”是“录音”。在“录音”里面,有一个标签形式的辅助导航。一个选项卡是搜索表单,另一个是结果集。提交表单时,应切换到结果选项卡。单击选项卡本身可以转到相应的视图。点击顶层导航(仪表板,日志)也可以将您带到正确的状态。

问题包括:

  • 选项卡的活动状态仅在单击选项卡两次后才适用。最初它应用活动
  • 顶级导航的行为不一致。有时也需要两次点击

这是我的设置的精简版。 Plunker

路由

$scope.tabs = [
  {
    heading: 'Search',
    state: 'recordings.search.form',
    active: false
  },
  {
    heading: 'Results',
    state: 'recordings.search.results',
    active: false
  }
];
$scope.go = function(route){
    $state.go(route);
};

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

$scope.$on("$stateChangeSuccess", function() {
    console.log('yay');
    $scope.tabs.forEach(function(tab) {
        tab.active = $scope.active(tab.route);
    });
});

标签代码

<tabset>
  <tab
    ng-repeat="t in tabs"
    heading="{{t.heading}}"
    ng-click="$state.go(t.state)"
    active="t.active">
  </tab>
</tabset>

标签视图

using (OracleConnection connection = new OracleConnection())
{
    connection.ConnectionString = "Data Source=" + ResolveServiceNameLdap("alias") + ";User id=user;Password=password";
    connection.Open();
}

0 个答案:

没有答案