使用自定义指令,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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

在自定义replace指令上使用ng-show不会显示或隐藏

来自分类Dev

ANgularjs:ng-repeat和嵌套的自定义指令

来自分类Dev

ANgularjs:ng-repeat和嵌套的自定义指令

来自分类Dev

自定义元素指令和属性

来自分类Dev

AngularJS / 用自定义方法替换 ng-click 和 ng-show 中的排序

来自分类Dev

AngularJS中的自定义指令和路由

来自分类Dev

angularjs ng-include和angularjs自定义指令不希望一起工作

来自分类Dev

Angular指令-如何使用JQuery将ngModel和ngBind添加到自定义指令元素?

来自分类Dev

自定义ngTagsInput和autoComplete指令(AngularJS)

来自分类Dev

AngularJS和自定义方法/ HTML的指令

来自分类Dev

在 AngularJS 中的 ng-repeat 指令中使用自定义过滤器订购数据

来自分类Dev

ng-messages不会显示在自定义指令中

来自分类Dev

使用ng消息和打字稿的自定义验证指令

来自分类Dev

使用自定义指令使用ng-repeat显示2个不同的表

来自分类Dev

带templateUrl和ng-repeat的自定义指令

来自分类Dev

带templateUrl和ng-repeat的自定义指令

来自分类Dev

离子隐藏和显示元素ng-show?

来自分类Dev

使用从服务填充的ng-options的AngularJS自定义指令

来自分类Dev

使用ng-repaet时未在angular自定义指令中调用click处理程序

来自分类Dev

AngularJS指令来解析和替换自定义元素的内容

来自分类Dev

如何为ng-table创建自定义指令(对表和ng-repeat使用不同的数据)

来自分类Dev

如何为ng-table创建自定义指令(对表和ng-repeat使用不同的数据)

来自分类Dev

测试自定义的角度指令是否显示/隐藏元素

来自分类Dev

如何在AngularJS中实现自定义格式和输入指令(解决超越范围的问题)?

来自分类Dev

angularjs自定义表单和字段指令:在FormController中找不到ngModelController

来自分类Dev

使用指令绑定angularjs中的自定义事件

来自分类Dev

在自定义指令上使用ng-model和自定义属性进行2种方式绑定之间的区别

来自分类Dev

在自定义指令上使用ng-model和自定义属性进行2种方式绑定之间的区别

Related 相关文章

  1. 1

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

  2. 2

    在自定义replace指令上使用ng-show不会显示或隐藏

  3. 3

    ANgularjs:ng-repeat和嵌套的自定义指令

  4. 4

    ANgularjs:ng-repeat和嵌套的自定义指令

  5. 5

    自定义元素指令和属性

  6. 6

    AngularJS / 用自定义方法替换 ng-click 和 ng-show 中的排序

  7. 7

    AngularJS中的自定义指令和路由

  8. 8

    angularjs ng-include和angularjs自定义指令不希望一起工作

  9. 9

    Angular指令-如何使用JQuery将ngModel和ngBind添加到自定义指令元素?

  10. 10

    自定义ngTagsInput和autoComplete指令(AngularJS)

  11. 11

    AngularJS和自定义方法/ HTML的指令

  12. 12

    在 AngularJS 中的 ng-repeat 指令中使用自定义过滤器订购数据

  13. 13

    ng-messages不会显示在自定义指令中

  14. 14

    使用ng消息和打字稿的自定义验证指令

  15. 15

    使用自定义指令使用ng-repeat显示2个不同的表

  16. 16

    带templateUrl和ng-repeat的自定义指令

  17. 17

    带templateUrl和ng-repeat的自定义指令

  18. 18

    离子隐藏和显示元素ng-show?

  19. 19

    使用从服务填充的ng-options的AngularJS自定义指令

  20. 20

    使用ng-repaet时未在angular自定义指令中调用click处理程序

  21. 21

    AngularJS指令来解析和替换自定义元素的内容

  22. 22

    如何为ng-table创建自定义指令(对表和ng-repeat使用不同的数据)

  23. 23

    如何为ng-table创建自定义指令(对表和ng-repeat使用不同的数据)

  24. 24

    测试自定义的角度指令是否显示/隐藏元素

  25. 25

    如何在AngularJS中实现自定义格式和输入指令(解决超越范围的问题)?

  26. 26

    angularjs自定义表单和字段指令:在FormController中找不到ngModelController

  27. 27

    使用指令绑定angularjs中的自定义事件

  28. 28

    在自定义指令上使用ng-model和自定义属性进行2种方式绑定之间的区别

  29. 29

    在自定义指令上使用ng-model和自定义属性进行2种方式绑定之间的区别

热门标签

归档