Question

我想将DOM转换为以下列表到菜单的下拉列表。在DOM中通过AngularJS

<div class="maincontent">
        <my-directive></my-directive>
        <ul>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
          <li>Option 4</li>
        </ul>
      </div>

指令

var app = angular.module("myModule", [])
.directive('myDirective', function(){
  return {
    //....
  }
});

Answer 1

我不认为指令元素在这种情况下会起作用，因为你想要触发下拉列表（点击按钮）。

这就是我的所作所为：

app.directive('dropdown', function($document) {
    return {
        restrict: "C",
        link: function(scope, elem, attr) {

            elem.bind('click', function() {
                elem.toggleClass('dropdown-active');
                elem.addClass('active-recent');
            });

            $document.bind('click', function() {
                if(!elem.hasClass('active-recent')) {
                    elem.removeClass('dropdown-active');
                }
                elem.removeClass('active-recent');
            });

        }
    }
});

我用class属性创建了它，这里是plunker：http://plnkr.co/edit/IipeWJtDWGuBAxtWAadV?p=preview

用AngularJS操纵dom

1 个答案: