指令中的jQuery函数不起作用

SjaakvBrabant

我的jQuery函数在我的指令中不起作用。

这是我的指令：

app.directive('responsiveNav', function () {
  return {
      restrict: 'E',
      link: function (element) {
          var pull = $('#pull');
          var menu = $('.nav-bar ul ul');
          var menuHeight = menu.height();

          $(pull).on('click', function (e) {
              e.preventDefault();
              menu.slideToggle();
          });

          $(window).resize(function () {
              var w = $(window).width();
              if (w > 320 && menu.is(':hidden')) {
                  menu.removeAttr('style');
              }
          });
      }
  };
});

HTML：

<div class="header" responsive-nav>
        <div class="nav-bar">
            <ul style="padding:15 0 15 0;height:50px;">
                <li style="border-right: none;">
                    <a href="" style="padding:0;"><img src="assets/images/who-logo.png"></a>
                </li>
                <a href="#" id="pull">Menu</a>
                <ul style="float:right;list-style-type:none;padding:8.5 0 8.5 0;">
                    <li><a class="active" href="">Home</a></li>
                    <li><a href="">About us</a></li>
                    <li><a href="">Tickets</a></li>
                    <li><a href="">Event</a></li>
                    <li><a href="">Gallery</a></li>
                    <li><a href="">Video</a></li>
                    <li><a href="">Contact</a></li>
                    <li style="border-right: none;"><a><i class="fa fa-facebook" style="font-size: 1.5em;"></i></a></li>
                    <li style="border-right: none;"><a><i class="fa fa-instagram" style="font-size: 1.5em;"></i></a></li>
                    <li style="border-right: none;"><a><i class="fa fa-twitter" style="font-size: 1.5em;"></i></a></li>
                </ul>
            </ul>

        </div>
    </div>

该指令甚至不对单击做出反应，#pull并且我的控制台没有错误。希望您理解问题。欢迎任何帮助！

查理

您的指令仅限于Element by