如何使用 "a href" 内部视图引用 DOM 元素 ID - Angular JS

Question

我试图在 google 上找到一些解决方案，但无法得到确切的答案。

我正在尝试使用以下代码更改视图内的选项卡：

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

但是每当我单击 "Size" 选项卡时，视图都会重定向到某个页面。我的意思是 URL 变化从 http://localhost:8080/abcd/index.html#/ TO http://localhost:8080/Final_Albatross/index.html#/size

没有视图实现，点击指的是 id "size" 和选项卡更改。

肯定 angular 将此点击视为新的视图调用。请帮帮我！！

我的 JS 文件：

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

虽然我已经使用 "target="_self" 实现了它，但我想以 angular 的方式实现它。

Answer 1

在 Angular 中使用锚链接需要 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 处理此类问题的方法。使用 angular 方式。

在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>

如何使用 "a href" 内部视图引用 DOM 元素 ID - Angular JS

How to refer DOM elements ID using "a href" inside views - Angular JS

href

angularjs