如何根据当前路线 ng-show 一些 html 内容？

Question

我有一个包含 angular 的页面，内容如下所示：

当我点击某个选项卡时，例如 "Servicios"，服务内容会显示在选项卡下方。

这是相应的代码：

<a href ng-click="tab.setTab(4)">Servicios</a>

.....

  <perfil-content ng-show="tab.isSet(2)"></perfil-content>

  <brand-content ng-show="tab.isSet(3)"></brand-content>

  <service-content ng-show="tab.isSet(4)"></service-content>

这一切都在一条独特的路线上，例如：http://localhost:9000/#/

现在我想要的是当给出 http://localhost:9000/#/services 时，单击时显示服务内容。

我试过这个：

<service-content ng-show="location.hash == '#/services'">

但不起作用。

感谢您的帮助。

Answer 1

解决此问题的最佳方法是使用 ui.router。为每个选项卡创建状态并使用它。查看此 link 以获取有关 ui-router.

用法的更多信息

配置

app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
  .state("shell", {
   url: "",
   templateUrl: "/shell.html"
  })
 .state("shell.services", {
   url: "/services",
   controller: "servicerCtrl",
   templateUrl: "/services.html"
 })
.state("shell.profiles", {
   url: "/profiles",
   controller: "servicerCtrl",
   templateUrl: "/services.html"
});
});

Shell.html

<ul>
  <li href="/services">Services</li>
  <li href="/services">Profiles</li>
</ul>
<ui-view></ui-view>

然而，如果你不想使用 ui-router，你可以在你的控制器中注入 $route, $routeParams 然后从那里提取路由，并根据它在 HTML.但是我强烈建议您使用 ui-router 作为解决方案。

Answer 2

虽然使用 ui.router 和父子状态是更好的解决方案。我继续尝试 $location

这是一个片段。你可以在 plnkr 上玩一下。

http://plnkr.co/edit/pfYjxwaTTvngMjZdh5O4

// Code goes here

var app = angular.module('myApp', []);

app.controller('MyCtrl', function($location) {
  this.isTab = function(str) {
    return $location.path() === '/' + str;
  };
});

<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body ng-controller='MyCtrl as ctrl'>
  <h1>Hello Plunker!</h1>
  <a href="#/tab1">Tab 1</a>
  <a href="#/tab2">Tab 2</a>
  <a href="#/tab3">Tab 3</a>
  <a href="#/tab4">Tab 4</a>

  <div ng-show='ctrl.isTab("tab1")'>
    <p>Content for tab 1</p>
  </div>
  <div ng-show='ctrl.isTab("tab2")'>
    <p>Content for tab 2</p>
  </div>
  <div ng-show='ctrl.isTab("tab3")'>
    <p>Content for tab 3</p>
  </div>
  <div ng-show='ctrl.isTab("tab4")'>
    <p>Content for tab 4</p>
  </div>
</body>

</html>

Answer 3

我同意其他答案，ui-router 将是有效的方式。它提供了一个有用的过滤器，叫做 isState，你可以像这样使用它：

<perfil-content ng-show="{{'perfil' | isState}}"></perfil-content>

<brand-content ng-show="{{'brand' | isState}}"></brand-content>

<service-content ng-show="{{'service' | isState}}"></service-content>

这样，它会根据您所在的州自动显示正确的组件。（当然您的州应该有正确的名称 perfil、brand 和 service )

如何根据当前路线 ng-show 一些 html 内容？

How to ng-show some html content base on the current route?

javascript

angularjs

angularjs-ng-show