jQuery在控制檯中工作，但不在網站中。也是用AngularJS

Question

我有我的看法如下代碼：

<ul class="nav nav-pills"> 
    <li role="presentation" ng-repeat='shop in shops'> 
     <a ng-href="#{{shop.slug}}" ng-bind="shop.name" ng-click='selectTab(shop.id)'></a> 
    </li> 
</ul> 
<!-- End of Navigation Pills --> 

<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane" ng-repeat='shop in shops' id="{{shop.id}}"> 
     <table>...</table> 
    </div> 
</div> 
<!--End of the Tab Contents --> 

我基本上是試圖讓導航藥丸單擊時，顯示某些tab-pane。我使用AngularJS指令ng-click和某店鋪的id作爲參數，並使用Bootstrap jQuery來實現結果。

我在我的app.js

$scope.selectTab = function(shop_id) { 
    $('.tab-pane').removeClass('active'); 
    $("#" + shop_id).tab('show'); 
} 
}); 

下面當我在控制檯使用類似的代碼手動更換shop_id，正在顯示的選項卡。但代碼不起作用。

請幫忙。

Answer 1

如果你在吊執行jQuery代碼，在DOM完全加載和一切資源被重新發送。在您的JavaScript文件中執行jQuery代碼可能會導致一些運行時問題，因此代碼將無法按預期執行。總結jQuery代碼的準備方法，就像這樣：「準備好了」

$(document).ready(function(){ 
    $scope.selectTab = function(shop_id) { 
     $('.tab-pane').removeClass('active'); 
     $("#" + shop_id).tab('show'); 
    }; 
}); 

From the doc:

一個頁面可以直到該文件是無法安全操控jQuery爲你檢測到這種狀態。包含在 $（document）.ready（）中的代碼只會在頁面Document Object 模型（DOM）準備好執行JavaScript代碼時運行。

Answer 2

爲什麼不使用AngularJS來做標籤切換？

<a ng-href="#{{shop.slug}}" ng-bind="shop.name" ng-click="ctrl.switchTab(shop.id)"></a> 

和

<div role="tabpanel" class="tab-pane" ng-repeat="shop in shops" ng-show="vm.currenTab==shop.id"> 

在你的控制器

然後，有這樣的事情：

$scope.vm = { 
    currentTab: 0 
}; 

$scope.ctrl = { 
    switchTab: function(shop_id) { 
     $scope.vm.currentTab = shop_id; 
     // other code here 
    } 
};