AngularJS根据URL/条件显示div

Question

我正在一个 AngularJS 应用中使用全局菜单。我不想在某些路径上显示某些链接。我尝试了以下方法，在我的控制器中：

$scope.location = $location;

在我看来：

<div ng-if="location.path() != /signup">
  [Content] 
</div>

但我无法使其工作。有什么想法吗？

此外，是否有一种方法可以在页面上打印出当前路径？

- Anders

Answer 1

你应该查看 "ng-show" 和 "ng-hide"。它们可以很容易地被用来有条件地显示或隐藏页面上的内容。一个示例是：

<div ng-show="myBoolean">Content will show when myBoolean is true</div>

你可以用一个在作用域中检查路径或执行其他需要检查的操作的函数来替换"myBoolean"。我认为这应该基本符合你的要求！有关ng-show的更多文档，请参见此处。

如果文档或我的示例难以阅读，我为你快速编写了一个plunkr(http://plnkr.co/edit/6fUZDzzGsRjowPOJZ6He?p=preview)。基本上，这只是展示如何使用ng-hide/ng-show指令（它们是相同的，只是相反的）。我编写的关键例程是：

 $scope.checkToggle = function(){
   // replace "myBoolean" with the logic that checks the path
   return $scope.myBoolean;
 };

只需将该逻辑替换为您想要检查的位置，它应该会正确地隐藏/显示。使用这个特定指令的真正好处是，您可以轻松支持 CSS 动画/转换，这将允许您在隐藏和显示元素时将其漂亮地淡入或淡出页面。希望这一切都有所帮助。祝你好运！

- drew_w

---

我更喜欢这种方法，而不是if语句。 - daremachine

使用您的答案，我已经让它工作了。我忘记的是在我的控制器定义中包含$location。MenuCtrl($rootScope, $scope, $window, $location)。 - Anders

Answer 2

只需引用与您的变量进行比较的字符串：

<div ng-if="location.path() != '/signup'">
  [Content] 
</div>

正如drew_w所说，你应该尝试使用ng-show，因为你在使用$location，很可能正在创建一个单页应用程序，在这种情况下重新加载DOM将比仅隐藏或显示它低效。

要打印它，只需放置

{{location.path()}}

任何地方，只要您的控制器使用了$scope.location，它就会生效。

- Jerska

---

我尝试在我的菜单视图中放置{{location.path()}}，但是然后{{location.path()}}会显示在页面上（Aungular初学者），我应该将它嵌入到其他东西中吗？ - Anders

是的，它在一个包含我的ng-controller的nav类中。 - Anders

你的控制台有报错吗？ng-if 有起作用吗？ - Jerska

不，还是没用。我觉得很奇怪。在我的控制器中 $scope.location = $location;，在视图中 <div ng-if="location.path() === '/signin'"> 应该可以工作，不是吗？ - Anders

嗯，似乎$scope.location = $location.path();会破坏某些东西。如果我注释掉它（在删除ng-if div之后），它就可以工作（ {{XXX}} 会被隐藏）。但是，如果我保留该行，则会打印出{{XXX}}。很奇怪... - Anders