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

我有三个按钮，标记为关于我们，联系我们 and 服务。每当我点击一个按钮时，散列值将被改变，并且我已经使用路由概念去到不同的页面。

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

这里的角的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; 
}

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

来源

2017-02-17 Harish

至于我可以看到有两个变化，你需要做：

而不是

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>

然而

我不建议使用上面的代码片断。而不是钩入你的路由逻辑。处理路由更改事件以更新从控制器读取的服务，以便在链接上设置正确的类。欲了解更多关于观看路线变化的信息：How to watch for a route change in AngularJS?

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

为了给你一个小概述：

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

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

路由事件处理程序
电话上与新航线服务“setRoute”

来源

2017-02-17 05:23:06

该死的，我真的忘了包括$范围，谢谢你。我会尝试:) – Harish

它仍然无法正常工作，要检查它是否正常工作我使用ngclick和一个函数来执行每当按钮被点击时，我已经在这个函数中记录$ scope.location。 $ scope.location的值在记录时是空的@Maarteen – Harish

稍后我会看到我是否可以为您提供一个工作示例。 –

你可以做一个函数，并传递它纳克级

<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; 
    }

来源

2017-02-17 05:50:23

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

回答

更新，新的建议

然而

相关问题