如何使用內部視圖中的「a href」引用DOM元素ID - Angular JS

Question

我試圖在谷歌上找到一些關於此的解決方案，但無法獲得確切的答案。

我試圖改變使用下面的代碼視圖裏面標籤：

  <ul class="nav nav-tabs"> 
       <li class="{active: selectedTab === 'details'}"><a href ng-click="selectTab('details')">Details</a></li> 
       <li class="{active: selectedTab === 'size'}"><a href ng-click="selectTab('size')">Size</a></li> 
       <li class="{active: selectedTab === 'shipping'}"><a href ng-click="selectTab('shipping')">Shipping</a></li> 
      </ul> 

但每當我點擊「大小」選項卡上，視圖重定向到一些頁。我的意思是URL從http://localhost:8080/abcd/index.html#/改變 TOhttp://localhost:8080/Final_Albatross/index.html#/size

沒有視圖實現，點擊指的是ID爲 「大小」 和標籤的變化。

絕對角度是將此點擊視爲新視圖調用。請幫助我！

我的JS文件：。

mainAngular.controller('ProductDetailController', function($scope, $routeParams) { 
$scope.prod_Id = $routeParams.prodId; 
$scope.selectTab = function(tabName) { 
    alert(tabName); 
    $scope.selectedTab = tabName; 
    alert($scope.selectedTab); 
} 
}); 

雖然我一直在使用「目標=」 _自我」實現了它，但我想這樣做的角方式

Answer 1

使用錨鏈接的角度需要target="_self" https://docs.angularjs.org/guide/ $位置

<ul> 
    <li><a href="#linktoroute">Link</a></li> 
    <li><a href="#anchor" target="_self">Anchor</a></li> 
</ul> 

Answer 2

忘記了jQuery，DOM方式來處理那樣的問題。使用角度的方式。

在AngularJS中，單一的事實點就是模型。視圖（即HTML）只是該模型的一種表示，在模型更改時會自動更改。

所以，你想要一個選定的選項卡。將其添加到模型中：

$scope.selectedTab = 'details'; 

您希望能夠更改選中哪個選項卡。這很簡單，只要

$scope.selectTab = function(tabName) { 
    $scope.selectedTab = tabName; 
} 

而你要認爲是反映模型值：

<ul class="nav nav-tabs"> 
    <li class="{active: selectedTab === 'details'}"><a href ng-click="selectTab('details'}">Details</a></li> 
    <li class="{active: selectedTab === 'size'}"><a href ng-click="selectTab('size'}">Size</a></li> 
</ul>