Question

我有一个带有角度的单页，内容如下：

当我点击某个标签，例如＆＃34; Servicios＆＃34;时，服务内容会显示在标签下。

以下是相应的代码：

<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。为每个选项卡创建状态以及使用它。有关ui-router的使用的更多信息，请查看此link。

<强>配置

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对此非常有效。它提供了一个名为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 ）

Answer 3

使用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>

如何在当前路线上显示一些html内容？

3 个答案: