Question

我无法理解ng-show angular指令，但它对我来说无法正常工作。我无法在控制器中获得布尔值，就像我在网上看到的一些examples一样。而不是使用选项卡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

根据您定义控制器的位置，ng-show指令与您定义的链接的范围不同。您需要更改控制器定义的位置：

<div class="container" ng-controller="ExtractionTabsCtrl">
  <div class="row">
    <ul class="nav nav-tabs nav-justified" role="tablist">
      <li id="titles"class="active"><a href ng-click="test()">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>
</div>

你会注意到我在你的行和后续div中添加了一个包装器。包装div现在是控制器的总范围，而不仅仅是ul。

Answer 2

你正试图将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标签。

编辑：

就像之前的回答所说的那样，你需要扩展控制器div以包含你的变化。我错过了，你对JQuery 所拥有的东西应该然后工作，但无论如何，ng-click都会更加清晰。

Angular / Bootstrap：ng-hide无法正常工作

2 个答案: