Question

在应用导航中点击链接后，每个相应链接下方会显示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在这里 - 非常感谢任何帮助

Answer 1

在这种情况下拥有隔离范围并不能解决问题。有很多方法可以达到你想要的效果。其中一个是为每个show-popup-nav分配一个id，将$scope.showPopup转换为一个数组，并为每个id保持一个单独的true / false。然后，对于每个ng-show，您将查看与每个id对应的索引，以获取true / false值。

我把它编码在那个人的Plunker上，正如你所期望的那样：http://plnkr.co/edit/CSikLIiuPNT9dfsfZfLk

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

Answer 2

创建隔离范围时，范围适用于应用指令的元素及其子元素。在这种情况下，这只是锚标记：

<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>将起作用。

编辑

实现这项工作的一种方法是将两个兄弟姐妹包装在父标记中，并在父标记上使用该指令：

{{1}}

然后你需要修改你的指令代码来找到锚标签并应用点击处理程序。

你可以尝试一种完全不同的方法，如@Bill Bergquist的另一个答案所示。

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

2 个答案: