隐藏/显示Angularjs中的元素，使用自定义指令、ng-show和$scope。

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

当在应用程序导航中点击链接时，带有ui-view内容的下拉列表显示在每个链接下面。

The HTML:

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.

我已经包含了一个ng-show属性，用于在$scope时打开下拉菜单。showPopup设置为true。

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

为了实现这一点，我创建了一个自定义指令，点击一个名为show-nav-popup的按钮。

The JS:

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

这里是Angularjs n00b，非常感谢您的帮助

2 个解决方案

#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.

在这种情况下拥有一个独立的范围并不能解决问题。有很多方法可以实现你想要的。其中之一是分配每个显示-弹出-导航一个id，转动$scope。showPopup进入一个数组，并为每个id保留一个true/false。然后，对于每个ng show，您将查看对应于每个id的true/false值的索引。

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

我把它写在那个家伙的插件上，按照您的期望工作: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.

编辑:我应该说，您可以使用一个隔离的范围来修复这个问题，但是这需要对您的DOM进行大量的修改，因为ng-show指令是您的show-popup-nav的一个兄弟，而不是一个孩子。

#2

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:

您正在一个标记上使用一个ng-show，该标记是锚标记的兄弟级:

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

这个兄弟程序不是隔离范围的一部分，因此它不会注意到showPopup的值已经更改。

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

如果将ng显示应用到锚标记的子DOM元素，那么它将会工作。

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

相反，您可以尝试一种完全不同的方法，如@Bill Bergquist给出的另一个答案中所建议的那样

#1