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

如果您在 condole 中执行 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:

在文档“准备就绪”之前，无法安全地操作页面。 jQuery 会为您检测到这种准备状态。内含代码 $( document ).ready() 只会运行一次页面 Document Object 模型 (DOM) 已准备好执行 JavaScript 代码。

Answer 2

为什么不用AngularJS来做tab切换呢？

<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
    }
};