角度/引導程序：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都會更干凈。