带有 angularjs 路由和 jquery 的选项卡

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();
    });

});

我还需要添加我正在使用 angular ui 路由器。有没有办法来解决这个问题？

感谢您的帮助。

Answer 1

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

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>

您可能需要针对其中的容器 div 稍微调整 js，但我对此进行了测试，它似乎对我来说很好用。希望这会有所帮助！