Question

我添加了路由到我的项目，但现在我的页面上的标签有问题，我使用id重定向到它们。但现在使用路由时，它认为我想在单击其中一个选项卡时重定向到页面。我也使用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

你不能使用带有主题标签的网址，因为angular使用主题标签作为前缀（你可以禁用它），请参阅SO中的this answer了解更多信息

Answer 2

如果您决定将角度路由添加到项目中，那么您将遇到JqueryUi Tabs的问题，因为带有＃tag的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并将其替换为数据目标，如下所示：

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

你可能需要稍微调整你在那里的容器div的js，但我测试了它，它似乎对我很好。希望这有帮助！

带有angularjs路由和jquery的选项卡

2 个答案: