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

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

首先，您应该阅读以下内容：

“在 AngularJS 中思考”如果我有 jQuery 背景？

然后，你应该看看这个：

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

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

由于您已经在使用指令，您可以element在链接函数中使用，而不是使用 jQuery (lite) 方式搜索和修改它。

Answer 2

find() - 仅限于使用 angular jqLit​​e 按标签名称查找，因此您必须使用 jquery 插件。