使用自定義指令，ng-show和$ scope隱藏/顯示Angularjs中的元素

當在應用程序導航中單擊鏈接時，將在各個鏈接下方顯示ui-view內容的下拉列表。

的HTML：

<div class="sc-dash-header"> 
    <ul> 
     <li> 
     <a class="navbar-brand" show-nav-popup href="">download</a> 
     <div id="nav-download-progress" class="dash-hdr-popup" ng-show="showPopup"> 
      <div ui-view="hdr-download-progress"></div> 
     </div> 
     </li> 
     <li> 
     <a class="navbar-brand" show-nav-popup href="">add</a> 
     <div id="nav-add" class="dash-hdr-popup" ng-show="showPopup"> 
      <div ui-view="hdr-add-content"></div> 
     </div> 
     </li> 
     <li> 
     <a class="navbar-brand" show-nav-popup href="">enter pin</a> 
     <div id="nav-unlock" class="dash-hdr-popup" ng-show="showPopup"> 
      <div ui-view="hdr-unlock"></div> 
     </div> 
     </li> 
    </ul> 
    </div>

我已經包括了一個ng-show屬性時$scope.showPopup設置爲true打開下拉。

爲了實現這個目標，我創建了一個自定義指令，並點擊一個名爲show-nav-popup的按鈕。

的JS：

.directive('showNavPopup', function() { 
    return { 
    restrict: 'A', 
    // scope: {}, 
    link: function(scope, el, attrs) { 
     el.on('click', function(){ 
     scope.$apply(function() { 
      scope.showPopup = true; 
     }); 
     console.log(scope); 
     }); 
    } 
    }; 
});

上述作品，但下拉每個元素打開。

問題：我需要隔離範圍，因此在每次點擊時，只會顯示相應的下拉菜單。我去掉行// scope: {} - 但這並不工作..

Angularjs的n00b這裏 - 任何幫助，將不勝感激

來源

2015-03-25 williamsowen

我不知道你的目的，似乎工作，我只是代替你的用戶界面視圖與硬編碼的內容「AAAAAA 「，」bbbbbb「和」cccccc「.http：//plnkr.co/edit/U8BMJtBnyK1oxviMV9aL？p = preview – 2015-03-25 03:43:40

因爲我需要隔離範圍..所以它們並不全部出現在一起..需要取消註釋行//範圍：{} - 道歉需要更清楚 – williamsowen 2015-03-25 04:19:13

有在這種情況下就沒有解決問題的分離範圍。有很多方法可以達到你想要的效果。其中之一是爲每個show-popup-nav分配一個id，將$scope.showPopup轉成數組，併爲每個id保留一個單獨的真/假。然後，對於每個ng顯示，您查看與每個id對應的索引，以顯示true/false值。

我編寫它掛在那傢伙的Plunker，您正常工作：http://plnkr.co/edit/CSikLIiuPNT9dfsfZfLk

編輯：我應該說，你可以使用一個隔離範圍，以解決這個問題，但這需要很大的變化，以您的DOM因爲ng-show指令是您的show-popup-nav的兄弟，而不是孩子。

來源

2015-03-25 05:34:56

當您創建隔離範圍時，範圍適用於您的指令應用於的元素，它是子元素。在這種情況下，這僅僅是錨標記：

<a class="navbar-brand" show-nav-popup href="">download</a>

你是一個標記，它是同級錨標記使用ng-show：

<div id="nav-download-progress" class="dash-hdr-popup" ng-show="showPopup">

的兄弟是不是分離範圍的一部分，所以它永遠不會注意到showPopup的值已經改變。

如果將ng-show應用於作爲定位標記的子元素的DOM元素，則它將起作用。

編輯使這項工作將是包裝在一個父標籤的兩個兄妹，並使用該指令父

方式一：

<div show-nav-popup> 
    <a href="#">Download</a> 
    <div ng-show="showPopup"></div> 
</div>

然後你需要修改您的指令的代碼以找到錨標籤並應用點擊處理程序。

你可以嘗試，而不是一個完全不同的方法，如通過@Bill貝格斯對方的回答表明

來源

2015-03-25 05:44:42

感謝您的解釋 - 非常感謝:) – williamsowen 2015-03-25 09:13:26

使用自定義指令，ng-show和$ scope隱藏/顯示Angularjs中的元素

回答

相關問題