Question

这是我的tabsMenu指令

angular.module('directives.tabsMenu', [])

.directive('tabsMenu', function() {
    return {
        // Restrict it to be an attribute in this case
        restrict: 'A',
        // responsible for registering DOM listeners as well as updating the DOM
        link: function(scope, element, attrs) {

            element.bind('click', function(e) {
                console.log('clicked');
                e.preventDefault();
                if(this.innerText.trim()=="Notes" ){

                    $("#notes").tab('show');

                }
                if(this.innerText.trim()=="Prospect Info" ){

                    $("#prospect").tab('show');

                }
                if(this.innerText.trim()=="Account Info" ){

                    $("#account").tab('show');

                }
                if(this.innerText.trim()=="Call Guide" ){

                    $("#script").tab('show');

                }
                if(this.innerText.trim()=="History" ){

                    $("#history").tab('show');

                }
                $(this).tab('show');
            });
        }
    };
});

这是tab html：

// this is the menu
      <ul id="tabs" class="nav" ng-hide="$state.is('producer.available')">
                <li >
                    <a href="#tab1" tabs-menu>Overview</a>
                </li>
                <li>
                    <a href="#tab2" id="prospect" tabs-menu>Prospect Info</a>
                </li>
                <li>
                    <a href="#tab3" id="account" tabs-menu >Account Info</a>
                </li>
                <li>
                    <a href="#tab6" tabs-menu id="script" >Call Guide</a>
                </li>
                <li>
                    <a href="#tab4" id="notes" tabs-menu  >Notes</a>
                </li>
                <li>
                    <a href="#tab5" id="history" tabs-menu >History</a>
                </li>
            </ul>


//this is in other part of the code .. 
    <div  id="notesHistory" class="row history-notes">
                <a href="#tab4"  tabs-menu>
                    <div class="col-xs-6 card-sub">
                        <span class="title">Notes</span>
                        {{lastComment}}
                    </div>
                </a>
                <a href="#tab5" tabs-menu>
                    <div class="col-xs-6 card-sub">
                        <span class="title">History</span>
                        {{lastHistory}}
                        <!--   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do... --> </div>
                </a>
            </div>
            <div class="row shortcuts">
                <a href="#tab2" tabs-menu>
                    <div class="col-xs-4 card-sub">
                        <i class="fa fa-user"></i>
                        <span class="title">Prospect Info</span>
                    </div>
                </a>
                <a href="#tab3" tabs-menu>
                    <div class="col-xs-4 card-sub">
                        <i class="fa fa-info-circle"></i>
                        <span class="title">Account Info</span>
                    </div>
                </a>
                <a href="#tab6" tabs-menu>
                    <div class="col-xs-4 card-sub">
                        <i class="fa fa-bullhorn"></i>
                        <span class="title">Call Guide</span>
                    </div>
                </a>
            </div>

因此从两个地方调用菜单，所以从其他状态调用不会设置菜单的活动状态，所以我通过获取硬编码值调用该菜单选项卡，我知道我在指令中写的是一团糟，首先我不应该在其中使用jquery .. 如果你能帮助我更好地写作，请帮助..

所以我真正的问题是，例如用户单击状态中的第4个选项卡，并且用户状态已更改，并且在下一个状态中，选项卡仍保留在第4个选项卡上，但我需要将其保留在第一个选项卡上。

我怎么能做到这一点？

tab不在指令中工作

0 个答案: