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

Question

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

现在，我想在 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 标签。

Answer 1

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

代替

var location = $location.hash;

您应该将变量绑定(bind)到范围。否则 View /模板无法访问它。您可以通过将其设置为这样的属性来实现

$scope.location = $location.hash;

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

更新，新建议

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

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>

还有

我不推荐使用上面的代码片段。而是 Hook 到您的路由逻辑中。处理路由更改事件以更新服务，然后从 Controller 读取该服务以在您的链接上设置正确的类。有关观看路线变化的更多信息:How to watch for a route change in AngularJS?

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

给你一个小概览:

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

服务
currentRoute -> 返回上次设置的路线
setRoute -> 设置一个新的当前路线

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