單擊鏈接並打開相應的選項卡

Question

我正在嘗試使用bootstrap，angularjs。 所以我在模態窗口中按下了導航標簽，並通過鏈接的點擊打開了這個模態。 但我想直接點擊打開相應的標簽。 如果我點擊旅行，我想去旅行標簽等。我應該用什么來解決這個問題？ 也許我需要模擬點擊或類似的東西？ http://jsfiddle.net/3kgbG/1056/

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                <div class="hobbies">
                    hobbies & interests
                </div>
                <div class="row padding-top group-icons">

                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <a href="#" data-toggle="modal" data-target="#myModal">
                            football
                        </a>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">

                        <a href="#" data-toggle="modal" data-target="#myModal">
                            travel
                        </a>

                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <a href="#" data-toggle="modal" data-target="#myModal">
                            history
                        </a>
                    </div>
                </div>
            </div> <!--popUp container-->

 <!-- Modal --> 

<div id="myModal" class="modal fade popUp" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="h2-style">My Hobbies</h2>
                    <hr class="hr_line"/>
                </div>
                <div class="modal-body">
                    <div>

                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#bartending" aria-controls="bartending" role="tab"
                                                                      data-toggle="tab">bartending</a></li>
                            <li role="presentation"><a href="#football" aria-controls="football" role="tab"
                                                       data-toggle="tab">football</a>
                            </li>
                            <li role="presentation"><a href="#travel" aria-controls="travel" role="tab"
                                                       data-toggle="tab">travel</a>
                            </li>
                            <li role="presentation"><a href="#history" aria-controls="history" role="tab"
                                                       data-toggle="tab">history</a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content" ng-controller="HobbiesCrtl">
                            <div role="tabpanel" class="tab-pane fade" id="{{hobby.id}}" ng-repeat="hobby in hobbies">
                                <div class="container padding-top">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                                <img src="{{hobby.img}}" alt=""
                                                     style="width: 70%; margin: 0 auto; display: block">
                                            </div>
                                            <div class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
                                                {{hobby.description}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
    <!--popUp container-->

 <!--angular Ctrl--> 

    myApp.controller('HobbiesCrtl', function($scope, $http){
        $scope.title = "my hobbies";
        $http.get(window.location + 'js/hobbies.json').success(function(data) {
            $scope.hobbies = data;
        })
    } );

 this is my json file: 

  {
    "id": "football",
    "img": "http://images.fastcompany.com/upload/adidas-jabulani-ball.jpg",
    "description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of  is the most popular in the"
  },

  {
    "id": "travel",
    "img": "http://thumbs.dreamstime.com/z/travelling-world-21448211.jpg",
    "description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of  is the most popular in the"
  },

Answer 1

只要您為視圖和模態窗口使用相同的控制器，它們就會共享相同的$ scope。

您可以像activeTab一樣創建范圍變量，並在單擊時設置：

<a href="#" data-toggle="modal" ng-click="activeTab == 'football'" data-target="#myModal">
                            football
                        </a>

在模態窗口中，如果范圍變量activeTab具有必要值，則只切換活動類：

<li role="presentation" ng-class="{active: activeTab == 'football'}"><a href="#football" aria-controls="football" role="tab"
                                                       data-toggle="tab">football</a>