具有引导程序和角度的选项卡视图

Question

I made a tab view using bootstrap for a angular template. but when i click on the tab it goes to the angular link router instead of going to the tab content.it may be because i have them as links but at the moment i really don't have any idea of how im going to solve this

    <ul class="nav nav-tabs">
    <li class="active"><a href="#info-tab" data-toggle="tab">Where you heading <i class="fa"></i></a></li>
    <li><a href="#address-tab" data-toggle="tab">Description<i class="fa"></i></a></li>
</ul>
<form id="rideForm" method="post" class="form-horizontal">
    <div class="tab-content">
        <div class="tab-pane active" id="info-tab">
            <div class="form-group">
                <label class="col-sm-2 control-label">From:</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" name="fullName" />
                </div>
                <label class="col-sm-2 control-label">To:</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" name="Email" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">Time:</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" name="jobTitle" />
                </div>
            </div>
            <div id="ridebuttongroup" class="col-sm-5 col-sm-offset-3">
                <a href="#address-tab" data-toggle="tab"><button type="next" class="btn btn-default">
                    <span class="glyphicon glyphicon-circle-arrow-right"></span> Next  </button></a>
            </div>
        </div>

        <div class="tab-pane" id="address-tab">
            <div class="form-group">
                <label class="col-sm-3 control-label">Description</label>
                <div class="col-sm-5">
                    <textarea rows="4" cols="50"></textarea>
                </div>
            </div>


            <div id="ridebuttongroup" class="col-sm-5 col-sm-offset-3">
                <button type="submit" class="btn btn-default">
                    <span class="glyphicon glyphicon-plane"></span> Ride</button>
                <a href="#info-tab" data-toggle="tab"><button type="next" class="btn btn-default">
                    <span class="glyphicon glyphicon-circle-arrow-left"></span> Previous  </button></a>
            </div>
        </div>
    </div>

    <div style="margin: 15px">
    </div>
</form>

please help!

Answer 1

停止将头撞在墙上，只需使用http://angular-ui.github.io/bootstrap/

Answer 2

A quick work around to this issue is to add:

target="_blank"

to your links. Angular, behind the scenes, does stuff to your links which is why you're having that problem.

This is a temp. solution to the issue.