Question

我正在使用AngularJS 1.0.7，使用ui-bootstrap 1.0.4。

我的应用程序有一个主导航栏，有些页面有更多级别的标签（使用ui.bootstrap tabset和tab指令）。

我想要完成的是：

单击选项卡将更新URL，添加“？tab = name”查询参数。开发人员将为每个<tab>元素添加一个附加指令以标识名称。

当加载视图时，某些东西（那就是擦除）会监听事件（哪个事件？）并更新选项卡，调用选项卡范围内的select()函数。

我一直在努力解决这个问题。基本上，操作的顺序是我的方式; $ routeChangeSuccess事件接近我想要的但是ngView指令用来加载内容。这意味着在广播事件之后，侦听$ routeChangeSuccess的指令才会存在。

在源代码中，我可以看到$ viewContentLoaded事件。然而，时机也很奇怪。

这就是我所拥有的：

module = angular.module "navigation-support", ["ui.bootstrap.tabs"]

module.directive "tabBookmark", ($log, $location, $route, $rootScope, $routeParams) ->
  restrict: "A"
  require: "^tab"
  link: (scope, element, attr, tabController) ->
    $log.log "scope=#{scope.$id}, tabController=#{tabController}, bookmark='#{attr.tabBookmark}'"

    scope.$watch "active", (newActive) ->
      if newActive
        $location.search "tab", attr.tabBookmark

    scope.$on "$destroy",
      $rootScope.$on "activateTab", (tabValue) ->
        $log.log "activateTab, tab='#{tabValue}' (looking for '#{attr.tabBookmark}')"

        if tabValue is attr.tabBookmark
          scope.select()

module.factory "TabSupport", ($log, $routeParams, $rootScope) ->
  ($scope) ->
    $log.log "TabSupport: initializing scope #{$scope.$id}"
    $scope.$on "$destroy",
      $rootScope.$on "$viewContentLoaded", ->
        tabValue = $routeParams.tab
        $log.log "TabSupport: tab changed to '#{tabValue}'"

        if tabValue
          $log.log "TabSupport: broadcasting 'activateTab'"
          $rootScope.$broadcast "activateTab", tabValue

为了使这项工作，我让我的视图的控制器调用TabSupport服务;我也禁用reloadOnSearch。

我看到甚至$ viewContentLoaded事件太早（令人困惑）。

然后我更改了代码以推迟activateTab广播（使用$timeout）。

现在，在收到activeTab事件之前，监视“活动”表达式的代码会过早触发。这是因为当没有显式激活标签时，标签集会选择第一个标签。

那么，有人能提出更好的方法吗？我更喜欢URL中的值作为查询参数，但它可以很容易地在本地存储或路径中......但这不是问题。问题是构造视图及其嵌套指令的操作顺序。

感谢您的任何指示！

Answer 1

我使用$location.search()数组来保存我正在处理的应用程序中的搜索过滤器设置。我使用下面的$on来监听这些更改并运行相应的搜索。

$scope.$on('$routeUpdate', function () {
    ...
});

如何将某些状态保存到URL作为查询参数

1 个答案: