AngularJS根据url / condition显示div

I'm having a global menu in a AngularJS app. I don't wan't to show some links on certain paths. I have tried the following. In my controller:

我在AngularJS应用程序中有一个全局菜单。我不想在某些路径上显示某些链接。我尝试了以下内容。在我的控制器中：

$scope.location = $location;

In my view:

在我看来：

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

But I can't get it to work. Any ideas?

但我无法让它发挥作用。有任何想法吗？

Also, is there a way to print out the current path on the page somehow?

另外，有没有办法以某种方式打印页面上的当前路径？

2 个解决方案

#1

You should look at "ng-show" and "ng-hide". They can be used to conditionally show and hide content on a page quite easily. An example would be:

你应该看看“ng-show”和“ng-hide”。它们可以非常容易地用于有条件地显示和隐藏页面上的内容。一个例子是：

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

You can replace "myBoolean" with a call to a function in scope that will check the path or do whatever it is that you need to check. I believe this should do more or less what you are looking for! For more documentation on ng-show see here.

您可以通过调用范围中的函数来替换“myBoolean”，该函数将检查路径或执行您需要检查的任何内容。我相信这应该或多或少地做你想要的！有关ng-show的更多文档，请参见此处。

In case the documentation or my example are difficult to read I wrote up a plunkr for you quickly (http://plnkr.co/edit/6fUZDzzGsRjowPOJZ6He?p=preview). Basically this just shows how to use the ng-hide/ng-show directive (they are the same, just opposites of each other). The key routine that I wrote is:

如果文档或我的例子难以阅读，我会尽快为你写一个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;
 };

Just replace that logic with what you want to check on the location and it should hide/show correctly. The really nice thing about using this particular directive is you can easily support css animations/transitions which will allow you to nicely fade your element in or out of the page as you hide and show it. Hope this all helps. Best of luck!

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

#2

Just quote the string you are comparing your variable to :

只需引用您要将变量与之比较的字符串：

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

As said by drew_w, you should probably try ng-show, since you are using $location, you probably are creating a single-page app, where reloading the DOM would be less efficient than just hiding or showing it.

正如drew_w所说，你应该尝试ng-show，因为你正在使用$ location，你可能正在创建一个单页应用程序，重新加载DOM的效率低于隐藏或显示它。

To print it, just put

打印出来，就这么说吧

{{location.path()}}

anywhere the controller with your $scope.location has effect.

具有$ scope.location的控制器在任何地方都有效。

#1