TabPanel does not work with angular

Navigation
2

I'm making a screen that has some tabs, I do not have much familiarity with it, so I'm making an example: 

<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">teste</div>
        <div role="tabpanel" class="tab-pane" id="profile">teste</div>
        <div role="tabpanel" class="tab-pane" id="messages">teste</div>
        <div role="tabpanel" class="tab-pane" id="settings">teste</div>
    </div>

</div>

But it happens that the whole project is done in angular, and we use routes to access the pages, okay ... the screen with the tabs usually opens everything right, however when clicking on a tab to change its content, the site Back to the home page, does anyone know how I can fix this?

    
asked by anonymous 10.05.2017 / 15:57

2 answers

0

After going testing here I came up with a solution, which was just taking the href and putting data-target. 

 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

I traded for this: 

 <li role="presentation" class="active"><a data-target="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    
10.05.2017 / 16:32
1

As our friend Brayan said in his post, it is necessary to change the href="# home" to data-target="# home".

= > data-target recognizes by ID passed to tab, for example: 

// Tab

<div role="tabpanel" class="tab-pane active" id="home">teste</div>

link

    
12.05.2017 / 04:50
Pick position of element top, left of element according to parent element Compare NULL using CASE SQL