2

我正在使用带有 ui-bootstrap 1.0.4 的 AngularJS 1.0.7。

我的应用程序有一个主导航栏，一些页面有一个额外级别的选项卡（使用 ui.bootstrap 选项卡集和选项卡指令）。

我想要完成的是：

单击选项卡将更新 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 中的值作为查询参数，但它可以很容易地在本地存储或路径中......但这不是问题。问题在于构造视图及其嵌套指令的操作顺序。

感谢您的任何指点！

4

1 回答 1

0

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

$scope.$on('$routeUpdate', function () {
    ...
});
于 2013-11-10T06:54:59.300 回答