Вкладки с маршрутизацией angularjs и jquery

Question

Я добавил маршрутизацию в свой проект, но теперь у меня проблема с моими вкладками на странице, которую я перенаправляю на них с помощью идентификатора. Но теперь при использовании маршрутизации он думает, что я хочу перенаправить на страницу, когда нажата одна из вкладок. Я также использую jQuery для анимации.

Вот HTML

   <div class="tabs">
        <ul class="tab-links" style="margin-bottom: 0px;margin-left: 5px;">
            <li ng-class="{active : prefferdFuel == 'Diesel'}"><a ng-show="fuelPrice.DIESEL != null"href="#Diesel">Diesel</a></li>
            <li ng-class="{active : prefferdFuel == 'Eurosuper'}"><a href="#Eurosuper" ng-show="fuelPrice.EUROSUP != null">Eurosuper</a></li>
            <li ng-class="{active : prefferdFuel == 'Super98'}"><a href="#Super98" ng-show="fuelPrice.SUPER98 != null">Super 98</a></li>
            <li ng-class="{active : prefferdFuel == 'CNG'}"><a href="#CNG" ng-show="fuelPrice.CNG != null">CNG</a></li>
            <li ng-class="{active : prefferdFuel == 'ADBlue'}"><a href="#ADBlue" ng-show="fuelPrice.ADBLUE != null">AD Blue</a></li>
        </ul>
        <div class="tab-content">
            <div id="Diesel"  ng-class="prefferdFuel == 'Diesel'? 'tab active' : 'tab'">
                <p>Diesel &#8364; {{fuelPrice.DIESEL}}</p>
            </div>
            <div id="Eurosuper" ng-class="prefferdFuel == 'Eurosuper'? 'tab active' :'tab'">
                <p>EuroSup &#8364; {{fuelPrice.EUROSUP}}</p>
            </div>
            <div id="Super98" ng-class="prefferdFuel == 'Super98'? 'tab active' :'tab'">
                <p>Super+98 &#8364; {{fuelPrice.SUPER98}}</p>
            </div>
            <div id="CNG" ng-class="prefferdFuel == 'CNG' ? 'tab active' :'tab'">
                <p> CNG &#8364; {{fuelPrice.CNG}}</p>
            </div>
            <div id="ADBlue" ng-class="prefferdFuel == 'ADBlue'? 'tab active' : 'tab'">
                <p> AD Blue &#8364; {{fuelPrice.ADBLUE}}</p>
            </div>
        </div>

это JQuery

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
        jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
        jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });

});

Мне также нужно добавить, что я использую угловой UI-маршрутизатор. Есть ли способ исправить это?

Спасибо за помощь.

Answer 1

Вы не можете использовать URL-адреса с хэштегами, так как angular использует хэштег в качестве префикса (вы можете отключить его), см. Этот ответ в SO для получения дополнительной информации о нем.

Answer 2

Если вы решите добавить угловую маршрутизацию в свой проект, то у вас возникнут проблемы с вкладками JqueryUi, поскольку href с тегом # вызовет изменение маршрута в Angular. Я написал концепцию о том, как обойти это

    function jqueryTabs () {
    return {
        $container: [],
        $list: [],
        link: function (scope, element, attrs) {
            var _self = this;
            setTimeout(function () {
                _self.$container = $(element[0]);
                _self.$list = _self.$container.find('ul:first-child');
                _self.init();
            }, 200);
        },
        init: function () {
            var _self = this;

            this.$container.addClass('ui-tabs ui-widget ui-widget-content ui-corner-all');
            this.$list.addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');

            var $bodyItems = this.$container.children('div');
            $bodyItems.addClass('ui-tabs-panel ui-widget-content ui-corner-bottom');

            var $listItems = this.$list.children('li');
            $listItems.addClass('ui-state-default ui-corner-top ui-tabs-active');

            var $listAnchors = $listItems.children('a');
            $listAnchors.addClass('ui-tabs-anchor');
            $listAnchors.css('cursor', 'pointer');
            $listAnchors.on('click', function () {
                _self.tabClicked($(this));
            });

            var $firstAnchor = $listItems.children('a').first();
            $firstAnchor.trigger('click');
        },
        tabClicked: function ($element) {
            var targetId = $element.data('target');
            var $target = this.$container.find(targetId);
            var $parent = $element.parent();

            $parent.addClass('ui-state-active').siblings('li').removeClass('ui-state-active');
            $target.css('display', 'block').siblings('div').css('display', 'none');
        }
    };
};

Так что это будет ваша директива, которую вы зарегистрируете на angular.

app.directive('jqueryTabs', jqueryTabs);

И все, что вам нужно сделать в вашем div это включить ссылку на директиву

<div class="tabs" jquery-tabs>

Якорный тег на каждой вкладке также необходимо немного изменить. Так что удалите href и замените его на data-target следующим образом:

<a ng-show="fuelPrice.DIESEL != null" data-target="#Diesel">Diesel</a>

Возможно, вам придется немного подправить js для контейнера, который у вас там есть, но я проверил это, и, похоже, со мной все работает. Надеюсь это поможет!