javascript - 指令中的 jQuery 函数不起作用

Question

我的 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 上的点击使用react，而且我的控制台中没有任何错误。希望你明白这个问题。欢迎任何帮助!

Answer 1

您的指令仅限于 Element by

 restrict: 'E'

但是您已经将指令作为属性。

<div class="header" responsive-nav>

restrict: 'A' 是解决问题的一种方法。

此外，我不同意您在这里使用 jquery 的某些方式。尽量保持棱 Angular 分明。

请花点时间引用 angular directive documentation更好地利用框架的这一强大功能。