使用来自不同控制器的$location.path()来显示导航按钮:AngularJS

Question

这是前面两个问题的延伸；如何根据我当前所在的页面/路线使用角度ng隐藏？以及如果$location.url==base（root）url，我如何使用ng隐藏？两者都涉及导航项目的显示，使用$location.path()，取决于当前路线。

我有一个非常简单的联系人列表风格的SPA，只有页眉、页脚和各种视图。收割台有3个导航按钮。每个都使用绑定到ng-click的函数来更改路径和显示的布尔测试，例如

<button ng-click="changePath('/summary')" ng-hide="path == '/summary' ">Summary</button>

在附加的HeaderController中，通过注入$location服务，我们得到了。

var vm = this;
vm.path = $location.path();
vm.changePath = changePath;
function changePath (newPath) {
    this.path = newPath;
    $location.path(newPath);
}

除两个实例外，这一切都按预期进行。

首先，当应用程序首次加载时。默认路由配置设置为.otherwise({redirectTo : "/summary"}，但摘要按钮仍会出现。

其次，当使用不同的控制器从页面视图内部更改路由时。例如，在摘要页面中，每个联系人都有一个链接，该链接将加载一个包含所有详细信息的新页面。

<div ng-repeat="data in contacts">
    ...
    <span ng-click="showDetails(contacts.indexOf(data))">Info</span>
</div>

并且相关的SummaryController再次仅使用$location来更改路由

var vm = this;
vm.contacts = dataStore.getDetails();
vm.showDetails = showDetails;
function showDetails(index) {
    $location.path("/details/" + index);
}

和以前一样，这是意料之中的事；将显示具有适当详细信息的视图，但导航按钮不会更新。

在这两种情况下，简单的浏览器页面刷新会显示正确的导航按钮。

我的理解是$location应该广播路线变更https://stackoverflow.com/a/12429133/2980217.然而，页面刷新表明，$digest周期可能需要由对$apply的调用触发，但这似乎是错误的。

我试着按照这个答案把$location.path()包装在$timeout里面https://stackoverflow.com/a/24144088/2980217但这并没有奏效。

---

12月2日编辑：我已经创建了该应用程序的骨架版本作为plunkhttp://plnkr.co/edit/7bQn6G9HveHajBMdrDfR.

对于应用程序加载问题，模板似乎首先加载，此时$location.path()为空字符串。为了克服这个问题，我使用了一个简单的条件来手动设置currentPath变量。

我似乎需要的是页面刷新。根据这篇文章https://www.sitepoint.com/premium/books/angularjs-novice-to-ninja/preview/exploring-the-location-service-2f17ca5使用CCD_ 12是可行的。我尝试过，但没有成功。

也许我做这件事的方式完全不对。如有任何建议，我们将不胜感激。

谢谢。

Answer 1

答案如下：https://stackoverflow.com/a/24831979/2980217.

非常简单：使用自定义服务来处理对路径的所有更改。

• Angular的$location服务可以注入到这个服务中
• 将此服务注入每个更改路径的控制器中
• 新服务使用$rootScope来广播更改。$rootScope.$broadcast("pathChanged", newPath);

• 导航按钮的控制器监听广播并相应地更新其当前路径的模型。这会根据需要触发显示或隐藏视图（即导航按钮）。

  $scope.$on("pathChanged", updatePath)
  function updatePath(evt, updatedPath) {
     vm.currentPath = updatedPath;
  }
  

更新后的Plunk在这里：http://plnkr.co/edit/7bQn6G9HveHajBMdrDfR