javascript - Angular/Bootstrap : ng-hide not working properly

Question

我无法理解 ng-show Angular Directive(指令)，它对我来说无法正常工作。我无法像某些 examples 那样在 Controller 中更改 bool 值我在网上看到过。我决定尝试为选项卡实现一个简单的 Angular 显示和隐藏，而不是使用选项卡 javascript。但是我在网上查了很多例子，但我无法找出问题所在。 div 中根本没有显示任何内容。

<div class="row" ng-controller="ExtractionTabsCtrl">
<ul class="nav nav-tabs nav-justified" role="tablist">
  <li id="titles"class="active"><a href="#">Titles</a></li>
  <li id="contacts"><a href="#">Contacts</a></li>
  <li id="writers"><a href="#">Writers</a></li>
  <li id="files"><a href="#">Files</a></li>
  <li id="companies"><a href="#">Companies</a></li>
</ul>
</div>

<div ng-show="titlesdiv">Titles</div>
<div ng-show="contactsdiv">Contacts</div>
<div ng-show="writersdiv">Writers</div>
<div ng-show="filesdiv">Files</div>
<div ng-show="companiesdiv">Companies</div>

和我的 JS 端

    MPWAdminControllers.controller("ExtractionTabsCtrl",["$scope", function($scope){

    $scope.writersdiv=false;
    $scope.contactsdiv=false;
    $scope.filesdiv=false;
    $scope.titlesdiv=true;
    $scope.companiesdiv=false;

    $('#contacts a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
        $scope.writersdiv=false;
        $scope.contactsdiv=true;
        $scope.filesdiv=false;
        $scope.titlesdiv=false;
        $scope.companiesdiv=false;
    })

    $('#writers a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
        $scope.writersdiv=true;
        $scope.contactsdiv=false;
        $scope.filesdiv=false;
        $scope.titlesdiv=false;
        $scope.companiesdiv=false;
    })

    $('#files a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
        $scope.writersdiv=false;
        $scope.contactsdiv=false;
        $scope.filesdiv=true;
        $scope.titlesdiv=false;
        $scope.companiesdiv=false;
    })

    $('#companies a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
        $scope.writersdiv=false;
        $scope.contactsdiv=false;
        $scope.filesdiv=false;
        $scope.titlesdiv=false;
        $scope.companiesdiv=true;
    })

    $('#titles a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
        $scope.writersdiv=false;
        $scope.contactsdiv=false;
        $scope.filesdiv=false;
        $scope.titlesdiv=true;
        $scope.companiesdiv=false;
    })

}]);

只要选择一个选项卡，就尝试翻转每个 div 上的显示值。我有一种感觉，这可能与混合 jquery 和 Angular 有关，但我不确定。

谢谢 詹姆斯

Answer 1

您正在尝试混合使用 JQuery 和 AngularJS，而您可能只使用 AngularJS 就可以了，这绝对可以工作。

HTML

<li id="contacts"><a ng-click="ShowContacts()">Contacts</a></li>

 ..

Javascript

$scope.ShowContacts = function()
{
   $scope.contactsdiv = true;

    .....

只需填写其余代码即可。

ng-click 是比在单击事件上定义 JQuery 更简单的方法。它将执行您放入其中的任何 Javascript，并且整体上更干净。

您还可以将 ng-click 移至 li 标记，这将消除您对 a 标记的需求。

编辑:

就像前面的答案所说，您需要扩展 Controller div 以包含您所做的更改。我错过了这一点，您使用 JQuery 所拥有的应该可以工作，但是 ng-click 无论如何都会更加干净。