单击时如何使用 Angular js 的 $location.hash 更改 html 元素的颜色？

Posted 2023-03-06

【中文标题】单击时如何使用 Angular js 的 $location.hash 更改 html 元素的颜色？

【英文标题】：How to use angular js's $location.hash to change the color of a html element when clicked?

【发布时间】：2017-07-06 12:11:27

【问题描述】：

我有三个按钮，分别标记为关于我们、联系我们和服务。每当我点击一个按钮时，哈希值都会改变，并且我已经使用路由概念转到不同的页面。

现在，我想在 AngularJS 中使用函数 $location.hash() 并在哈希值发生变化时更改按钮的颜色。

请看下面我写的代码：

<div ng-controller="mainController">
    <a href = "#/aboutus" ng-class="'active': location == '/aboutus'">About us</a>
    <a href = "#/contactus" ng-class="'active': location == '/contactus'">Contact us</a>
    <a href = "#/services" ng-class="'active': location == '/services'">Services</a>
</div>

这是我编写的 Angular js 代码：

app.controller('mainController', ['$scope', '$location', function($scope,$location)
    var location = $location.hash();
]);

这是CSS：

.active
    background-color: red;
    color : white;

a
    padding:10px;
    background-color: white;
    color: black;
    border: 1px solid black;

我不知道代码有什么问题，但我无法获得颜色，单击时该类未添加到 a 标记中。

【参考方案1】：

据我所知，您需要进行两项更改：

代替

var location = $location.hash;

您应该将变量绑定到范围。否则视图/模板无法访问它。您可以通过将其设置为这样的属性来做到这一点

$scope.location = $location.hash;

对于第二部分，哈希不是以/ 开头，而是以# 开头。因此名称哈希;)。所以尝试检查#aboutus 而不是/aboutus

更新，新建议

在构建示例时，我发现设置中有一点缺陷。这是由于 Angular 观察变量和处理范围变化的方式。所以如果你想在控制器中保留路由和高亮逻辑，我建议你像下面的例子一样设置它。这使您可以完全控制应用程序功能和路由更改的处理方式。

angular.module('App', []);

angular
  .module('App')
  .controller('Foo', ['$scope', function($scope) 
    $scope.location = 'unset';
    $scope.setLocation = function(newLocation) 
      console.log(newLocation);
      $scope.location = newLocation;
    ;
]);

a.active 
  font-size: 2em;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
<div ng-controller="Foo">
  <a href="#firstLocation" ng-click="setLocation('first')" ng-class="active: location == 'first'">First Location</a>
  <a href="#somewhereElse" ng-click="setLocation('else')" ng-class="active: location == 'else'">Somewhere else</a>
  <p> location </p>
</div>
</div>

还

我不建议使用上面的代码 sn-p。 而是挂钩到您的路由逻辑。处理路由更改事件以更新服务，然后从控制器读取该服务以在链接上设置正确的类。 更多观看路线变化信息：How to watch for a route change in AngularJS?

这种方法的优点是您可以确定当前位置与您保存的信息相匹配。如果您要提供其他选项来浏览整个应用程序，您的位置变量将自动更新。与上述设置相反，仅在点击实际链接时才进行跟踪。

给你一个小小的概述：

控制器 currentRoute -> 返回路由服务当前路由

服务 currentRoute -> 返回最后设置的路由 setRoute -> 设置新的当前路线

路由事件处理程序 使用新路由在服务上调用“setRoute”

【讨论】：

该死，我真的忘了包括 $scope，谢谢。我会试试看的:)

它仍然无法正常工作，为了检查它是否正常工作，我使用了 ngclick 和一个在单击按钮时执行的函数，我在此函数中记录了 $scope.location。记录 @Maarteen

时的 $scope.location 值为空

稍后我会看看能否为您提供一个工作示例。

我添加了一个例子和一个建议。

它正在工作，你真的很棒。谢谢你解释清楚:)

【参考方案2】：

你可以创建一个函数并在 ng-class 中传递它

<a href = "#/aboutus" ng-class = "'active': isActive('/aboutus')">About us</a>
<a href = "#/contactus" ng-class = "'active': isActive('/contactus')">Contact us</a>
<a href = "#/services" ng-class = "'active': isActive('/services')">Services</a>

然后在你的 JS 中

$scope.isActive = function(url) 
    return $location.path().indexOf(url) > -1;