2017-05-11 3 views
-2

Ich habe eine Webanwendung, die viele Registerkarten enthalten kann (mit Bootstrap Pillen und Tabs). Registerkarten werden hinzugefügt, wenn der Benutzer auf einen Befehl klickt (aus einem Befehlsmenü) oder wenn der Benutzer auf eine Entität innerhalb einer vorhandenen Registerkarte klickt (stellen Sie sich eine Registerkarte mit einer Liste von Datensätzen vor und wenn Sie auf einen bestimmten Datensatz klicken) Ein neuer Tab wird erstellt, der alle Felder innerhalb des Datensatzes anzeigt.Javascript - Simulieren Benutzer klicken

Vorhandene Tabs werden durch Klicken auf ein kleines "X" rechts neben der entsprechenden Pille geschlossen.

Das funktioniert reibungslos bis auf eine Sache für mich keine funktionierende Lösung finden:

Wenn ein neuer Tab erstellt wird, wird der Benutzer auf der Pille klicken gezwungen, die entsprechende Tab sichtbar zu machen.

I einen Mechanismus derart eingestellt sind, daß die Lasche der Steuerung ein Ereignis am Ende der Initialisierung sendet, Ereignis, das von der gleichen Steuereinheit empfangen wird, als Griffe Tabs Schöpfung (bislang so gut).

Im Event-Handler, habe ich versucht, mehrere Optionen zu der neuen Tab ohne Erfolg zu aktivieren. Alle Optionen werden ohne Fehler ausgeführt, aber nichts passiert.

Einige der Dinge, die ich versucht:

  1. angular.element(domElement).triggerHandler('click');,

  2. Lösungen in this Post vorgeschlagen,

  3. ...

Wie bereits erwähnt, sie alles vollständig ohne Fehler, aber kein doe ist der Trick.

Jeder Vorschlag wird sehr geschätzt (besonders, wenn es sich herausstellt, um die Arbeit zu erledigen).

EDIT:

Hier sind einige Teile des Codes, die die entsprechenden Teile der Anwendung beschreiben:

HTML Pillen und Tabs:

<!-- Pills... --> 
     <li ng-repeat="One_Tab in Running_Tabs" id="Pill_{{One_Tab.Tab_ID}}"> 
      <a href="#{{One_Tab.Page_Type}}_{{One_Tab.Instance}}" data-toggle="tab"><b>{{One_Tab.Title}} ({{One_Tab.Instance}})</b> 
       <i class="glyphicon glyphicon-remove pull-right" 
        style="display:block;float:right;cursor:pointer;background:red;color:white;margin:5px 0 0 10px;top:-5px;border:solid 4px red;border-radius:11px" 
        ng-click="Close_Tab(One_Tab.Tab_ID)"></i> 
      </a> 
     </li> 
    </ul> 

    <!-- Tabs... --> 
    <div class="tab-content clearfix"> 
     <div class="tab-pane" ng-repeat="One_Tab in Running_Tabs" id="{{One_Tab.Page_Type}}_{{One_Tab.Instance}}" ng-include="Build_Page_Refrerence(One_Tab.Page_Type)"> 
     </div> 
    </div>   

Emission von Ereignis innerhalb neuen Tab-Controller:

$rootScope.$emit("Activate_Me",$scope.Tab_Forward_Info.Pill_Name) ; 

Empfang der Veranstaltung:

$rootScope.$on('Activate_Me', function (event, Pill_Name) { 

     console.log("Request received from new tab to become active: " + Pill_Name) ; 

     $("#Pill_Name").click() ; 

    }) ; 

Hinweis: Pill_Name trägt den Namen des Elements, auf das der Klick simuliert werden muss.

Das Ereignis wird gesendet (ausgelöst) und wird vom obigen Code mit dem korrekten Namen des Elements empfangen.

+1

verwenden könnte bitte ein runnable Plunker/jsfiddle oder zumindest Code, den Sie machen Bisher haben andere schnell Ihr Problem reproduzieren können. – Pengyy

+0

statt den Klick zu simulieren, können Sie nicht tun, was auch immer programmgesteuert klickt? Wie ein Funktionsaufruf oder Ereignisemission? – tanmay

+0

@Pengyy, es ist zu komplex, um einen Plünderer dafür zu machen. Ich werde in ein paar Minuten die relevanten Teile des Codes hinzufügen (BTW, "Danke" für die Abstimmung unten ...). – FDavidov

Antwort

-2

die AddClass verwenden, wenn seine mögliche

$("#Pill_Name").addClass("class"); 

ich habe keine andere Lösung leider und Sie die .removeclass("class") zum Ändern Tabs

Verwandte Themen