Hide/show an element in Angularjs using custom directive, ng-show and $scope

Question

When a link is clicked in the app navigation a dropdown with ui-view content shows below each respective link.

The 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>

I've included an ng-show attribute to open the dropdown when $scope.showPopup is set to true.

To achieve this I've created a custom directive with an on click called show-nav-popup.

The 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);
      });
     }
   };
 });

The above works, but the dropdown opens on each element.

Question: I need to isolate the scope, so on each click, only the respective dropdown appears. I uncomment the line // scope: {} - but this doesn't work..

Angularjs n00b here - any help would be much appreciated

I don't know your purpose, it seems worked, I just replace you ui-view with hard code content "aaaaaa", "bbbbbb", and "cccccc".plnkr.co/edit/U8BMJtBnyK1oxviMV9aL?p=preview — huan feng
– huan feng, Commented Mar 25, 2015 at 3:43
Because I need to isolate scope.. So they don't all appear at once.. Need to uncomment the line // scope : {} - apologies needed to be clearer — williamsowen
– williamsowen, Commented Mar 25, 2015 at 4:19

Bill Bergquist · Accepted Answer · 2015-03-25 18:35:23Z

1

Having an isolate scope in this situation wouldn't fix the problem. There are a ton of ways to achieve what you want though. One of which is to assign each show-popup-nav an id, turn $scope.showPopup into an array, and keep an individual true/false for each id. Then for each ng-show, you look at the index corresponding to each id for the true/false value.

I coded it up on that guy's Plunker, working as you expect: http://plnkr.co/edit/CSikLIiuPNT9dfsfZfLk

EDIT: I should say, you COULD use an isolate scope to fix this, but that would require a lot of changes to your DOM, as the ng-show directive is a sibling to your show-popup-nav, and not a child.

edited Mar 25, 2015 at 18:35

answered Mar 25, 2015 at 5:34

Bill Bergquist

2632 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sunil D. · Accepted Answer · 2015-03-25 05:57:23Z

When you create the isolate scope, the scope applies to the element that your directive is applied to, and it's child elements. In this case that's just the anchor tag:

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

You are using an ng-show on a tag that is a sibling to the anchor tag:

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

The sibling is not part of the isolate scope, and so it never notices that the value of showPopup has changed.

The ng-show would work if it were applied to a DOM element that was a child of the anchor tag.

EDIT

One way to make this work would be to wrap your two siblings in a parent tag, and use the directive on the parent:

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

Then you'd need to modify your directive's code to find the anchor tag and apply the click handler.

You might instead try a completely different approach as suggest in the other answer by @Bill Bergquist

Collectives™ on Stack Overflow

Hide/show an element in Angularjs using custom directive, ng-show and $scope

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related