Материализация вкладок Якорные ссылки с угловым Js

Question

Материализация вкладок Якорные ссылки с угловым Js

0

всем привет

Я делаю веб-приложение, используя AngularJS и MaterializeCSS для Frontend, все работает хорошо, пока я не использовал компонент Materialize под названием Tabs. Когда я искал ошибки, я понял, что ошибка связана с привязкой в закладках. Угловой идентифицирует 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-->

Sebas Pinto 23 апр. 2016, в 07:09

Источник

Теги:

javascript

angularjs

materialize

3 ответа

Ещё вопросы

Gabe Rogan · Answer 1 · 2016-11-17T15-46-00.000Z

Я знаю, что это старо, но я просто решил проблему, отлаживая материализацию плагина tabs.js. Теперь я могу переключать вкладки, используя ng-click, и анимация работает плавно. Вот как вы можете это сделать:

Загрузить этот файл https://cdn.rawgit.com/Dogfalo/materialize/master/dist/js/materialize.js
Перейдите в часть tabs.js плагина (строки 1301-1464). Замените файл jsbin javascript здесь: https://jsbin.com/nokepaqage/1/edit?html,js,output
Настройте маршруты.
В корневом контроллере настройте прототип $scope.page = {}.
В вашем дочернем конроллере для каждой страницы напишите $scope.page.id = 'your-title'};
Используйте ng-class в каждом .tabs li a так: ng-class="{active: page.id==='yourPage'}".
В каждом .tabs li a настройте ng-click ng-click="go('/news')
В корневом контроллере перейдите в $location (см. Мой jsbin) и создайте функцию go (см. Jsbin).

Это сработало для меня! Дайте мне знать, если у вас есть какие-либо вопросы/проблемы!

Sourabh Munjal · Answer 2 · 2016-04-23T06-22-00.000Z

Вместо добавления тега привязки вы можете попробовать добавить ng-click в тег списка и на ng-click вы можете изменить маршрут или, может быть, что-то вроде location.hash = "LATAM".

byteC0de · Answer 3 · 2016-04-23T03-24-00.000Z

вы можете решить эту проблему, используя 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"

Извините, но я попробовал оба, и ничего не работает, когда я попробовал первый вариант, вкладки больше не нажимаются, а во втором варианте у меня все еще остается та же проблема
можно добавить некоторую ширину и высоту к тегу li