javascript - 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 代码包装在 ready 方法中，就像这样:

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

From the doc:

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.