用Angular Js實現選項卡錨鏈接

Question

嗨，大家好

我正在制作一個Web應用程序，使用AngularJS和MaterializeCSS作為前端，直到我使用稱為Tabs的Materialize組件，一切都運轉良好。 當我尋找錯誤時，我意識到錯誤是標簽中的錨點鏈接。 Angular將href =“＃link”標識為一條路線，但Materialize用於ID選擇器。 我不知道該怎么辦，我將不勝感激

    <!-- Begin Tabs-->
<div class="section white">
    <div class="container tab-container z-depth-5">
        <div class="row">
        <div class="col s12">
            <div class="center tab-header white-text">
                <h1>Pro Players</h1>
            </div>
          <ul class="tabs">
            <li class="tab col s3"><a class="active" href="#top">Top Mundial</a></li>
            <li class="tab col s3"><a href="#NA">Norte América</a></li>
            <li class="tab col s3"><a href="#LATAM">Latino América</a></li>
          </ul>
        </div>
        <div id="top" class="col s12 tab-div">
            <h1 class="">Mejores jugadores del mundo..</h1>
            <h2>Norte América</h2>
        </div>
        <div id="NA" class="col s12 tab-div">
            <h1 class="">Mejores jugadores de NA..</h1>
            <h2>Norte América</h2>
        </div>
        <div id="LATAM" class="col s12 tab-div">
            <h1 class="">Mejores jugadores latinos..</h1>
            <h2>Latino América</h2>
        </div>
        </div>
    </div>
</div>
<!-- End Tabs-->

Answer 1

您可以使用ng-show解決此問題

<ul class="tabs">
    <li class="tab col s3" ng-click="currentTab = 'Top'"><a ng-class="{'active':currentTab == 'Top'}"  >Top Mundial</a></li>
    <li class="tab col s3" ng-click="currentTab = 'NA'"><a ng-class="{'active':currentTab == 'NA'}">Norte América</a></li>
    <li class="tab col s3" ng-click="currentTab = 'LATAM'"><a ng-class="{'active':currentTab == 'LATAM'}">Latino América</a></li>
</ul>

<div ng-show="currentTab == 'top'" class="col s12 tab-div">
    <h1 class="">Mejores jugadores del mundo..</h1>
    <h2>Norte América</h2>
</div>
<div ng-show="currentTab =='NA'" class="col s12 tab-div">
    <h1 class="">Mejores jugadores de NA..</h1>
    <h2>Norte América</h2>
</div>
<div ng-show="currentTab == 'LATAM'" class="col s12 tab-div">
    <h1 class="">Mejores jugadores latinos..</h1>
    <h2>Latino América</h2>
</div>

js

$scope.currentTab = 'TOP';

要么

您可以使用data-target而不是href

data-target="#idName"

Answer 2

您可以嘗試在列表標記中添加ng-click而不是添加錨標記，然后單擊ng-click可以更改路線，也可以更改諸如location.hash =“ LATAM”之類的名稱。

Answer 3

我知道這很舊，但是我只是通過調試materialize的tabs.js插件解決了這個問題。 現在，我可以使用ng-click切換選項卡，動畫可以流暢運行。 您可以按照以下方法進行操作：

1. 下載此文件https://cdn.rawgit.com/Dogfalo/materialize/master/dist/js/materialize.js

2. 轉到插件的tabs.js部分（1301-1464行）。 在此處將其替換為jsbin javascript文件： https ://jsbin.com/nokepaqage/1/edit?html,js,output

3. 設置您的路線。

4. 在您的根控制器中，設置原型$scope.page = {} 。

5. 在您的孩子控制者中，為每個頁面寫$scope.page.id = 'your-title'};
6. 在每個.tabs li a使用ng-class就像這樣： ng-class="{active: page.id==='yourPage'}" 。
7. 在每個.tabs li a ，設置一個ng-click ng-click="go('/news')
8. 在您的根控制器中，傳入$location （請參閱我的jsbin）並創建go函數（請參閱jsbin）。

這對我有用！ 讓我知道您是否有任何疑問/問題！