AngularJS根据url/condition显示div

And*_*ers 8 html javascript css angularjs

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

$scope.location = $location;
Run Code Online (Sandbox Code Playgroud)

在我看来:

<div ng-if="location.path() != /signup">
  [Content] 
</div>
Run Code Online (Sandbox Code Playgroud)

但我无法让它发挥作用.有任何想法吗?

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

dre*_*w_w 12

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

<div ng-show="myBoolean">Content will show when myBoolean is true</div>
Run Code Online (Sandbox Code Playgroud)

您可以将"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;
 };
Run Code Online (Sandbox Code Playgroud)

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


Jer*_*ska 6

只需引用您要比较变量的字符串:

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

正如 draw_w 所说,您可能应该尝试ng-show,因为您正在使用$location,您可能正在创建一个单页应用程序,在这种应用程序中,重新加载 DOM 比仅仅隐藏或显示它效率低。

要打印它,只需放入

{{location.path()}}
Run Code Online (Sandbox Code Playgroud)

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