角度/引导程序：ng-hide无法正常工作

Question

我在理解ng-show 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

根据定义控制器的位置，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>

 ..

Java脚本

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

    .....

只需填写其余代码即可。

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

您也可以将ng-click移至li标签，这样一来您就不需要标签了。

编辑：

就像之前的回答一样，您需要扩展controller div以包括您所做的更改。 我错过了，然后使用JQuery 可以正常工作，但是无论如何ng-click都会更干净。