使用自定义指令，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时，我包含了一个用于打开下拉菜单的属性。

为此，我创建了一个自定义指令，该指令带有一个名为的on click 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在这里-任何帮助将不胜感激

比尔·伯格奎斯特

在这种情况下使用隔离范围无法解决问题。尽管有很多方法可以实现您想要的。其中之一是为每个show-popup-navID分配一个ID，将其$scope.showPopup转换为一个数组，并为每个ID保留单独的true / false。然后对于每个ng-show，您查看与每个ID对应的索引，以获取true / false值。

我在那个家伙的Plunker上进行了编码，如您所愿地工作：http ://plnkr.co/edit/CSikLIiuPNT9dfsfZfLk

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。