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

为什么不使用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
    }
};

Answer 2

如果您正在吊卡中执行jQuery代码，则dom将完全加载并重新发送所有资源。在javascript文件中执行jQuery代码可能会导致一些运行时问题，因此代码不会按预期执行。将jQuery代码包装在ready方法中，如下所示：

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

From the doc:

在文档准备好之前，页面无法安全操作。＆＃34; jQuery为您检测这种准备状态。代码包含在里面 $（document）.ready（）只会运行一次页面Document Object 模型（DOM）已准备好执行JavaScript代码。

jQuery在控制台中工作但不在网站中工作。我也使用AngularJS

2 个答案: