如何使用角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元素的顏色？

回答

更新，新的建議

然而

相關問題