javascript - 模板未更新，我需要使用 $rootScope.$apply 还是其他东西？

Question

我正在制作一个连接到集群的 Web 应用程序，因此 99% 的情况下，我的 URL 类似于:/cluster/cluster_name/something/else。由于路线是动态的，我需要在导航栏中动态生成 ng-href。

现在，我有一个服务可以解析 URL 并将其传递给索引模板:

app.factory('GetCluster',function($location) {
  return {
    cluster: {name: $location.path().split('/')[2]}
  };
});

然后在导航 Controller 中我有这个:

function NavigationController($scope, $location, GetCluster) {
  $scope.cluster = GetCluster.cluster.name;
  $scope.isActive = function (viewLocation) {
    return viewLocation === $location.path()
  }

最后在模板中:

<div class="sidebar-nav navbar-collapse" ng-controller="NavigationController">
  <div ng-if="cluster">
    <ul class="nav" id="side-menu">
      <li><a ng-class="{ active: isActive('/') }" ng-href="/#!/"><i class="fa fa-home"></i> Home</a></li>
      <li><a ng-class="{ active: isActive('/cluster/' + cluster) }" ng-href="/#!/cluster/{{ cluster }}"><i class="fa fa-sitemap"></i> Cluster</a></li>
      <li><a ng-class="{ active: isActive('/cluster/' + cluster + '/nodes') }" ng-href="/#!/cluster/{{ cluster }}/nodes"><i class="fa fa-hdd-o"></i> Nodes</a></li>
      <li><a ng-class="{ active: isActive('/cluster/' + cluster + '/namespaces') }" ng-href="/#!/cluster/{{ cluster }}/namespaces"><i class="fa fa-database"></i> Namespaces</a></li>
      <li><a ng-class="{ active: isActive('/cluster/' + cluster + '/views') }" ng-href="/#!/cluster/{{ cluster }}/views"><i class="fa fa-search"></i> Views</a></li>
      <li><a ng-class="{ active: isActive('/cluster/' + cluster + '/tasks') }" ng-href="/#!/cluster/{{ cluster }}/tasks"><i class="fa fa-tasks"></i> Tasks</a></li>
    </ul>
  </div>
  <div ng-if="!cluster">
    <ul class="nav" id="side-menu">
      <li><a ng-class="{ active: isActive('/')}" ng-href="/#!/"><i class="fa fa-home"></i> Home</a></li>
    </ul>
  </div>

这可行，但如果我切换到另一个集群，ng-href 仍然指向旧的集群。我必须刷新浏览器中的页面才能显示正确的链接。

我尝试将服务的返回包装到 $rootScope.$apply() 中，但这不起作用。它出现错误，类似于 $digest已经在进行中。

我该如何解决这个问题？

谢谢，

Answer 1

尝试这样的服务:

app.factory('GetCluster',function($location) {
    return {
        cluster: function() {
            var path = $location.path().split('/');
            return path[2];
        }
    }
});

然后在 Controller 中调用集群函数:

$scope.cluster = GetCluster.cluster();

如果需要，您也可以将路径位置作为参数传递以从服务返回。