Question

我有以下代码尝试使用AngularJS创建下拉菜单，但它不起作用：

CSS：

.display_none {
  display:none;
}

HTML：

<div ng-app="app">
  <div dropdown>
    <div class="drop_down display_none">
      <div id="elementWrap">
        // stuff
      </div>
    </div>
  </div>
</div>

AngularJS：

angular.module("app")
  .directive("dropdown",function(){
    return function(scope,element){
      element.bind("click",function(){
        if(element.find('.drop_down').hasClass('display_none'))
        {
          element.find('.drop_down').removeClass('display_none');
          element.find("#elementWrap").stop(true,true).delay(100).slideDown(350);
        }
        else
        {
          element.find("#elementWrap").stop(true,true).delay(100).slideUp(350,function(){
            element.find('.drop_down').addClass('display_none');
          });
        }
      });
    };
  });

Answer 1

首先，你应该读完这个：

"Thinking in AngularJS" if I have a jQuery background?

然后，你应该看看这个：

http://angular-ui.github.io/bootstrap/

angular-ui提供了ui.bootstrap.dropdownToggle。您可以使用它或检查that code并重建它的功能。

由于您已经在使用指令，因此可以在链接函数中使用element，而不是以jQuery（lite）方式对其进行搜索和修改。

Answer 2

find（） - 仅限于使用angular jqLite按标签名称进行查找，因此您必须使用jquery插件。

如何使用AngularJS指令切换下拉菜单？

2 个答案: