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上的点击做出反应，我的控制台中没有错误。希望你能理解这个问题。欢迎任何帮助！

Answer 1

您的指令仅限于元素

 restrict: 'E'

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

<div class="header" responsive-nav>

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

此外，我不同意你在这里使用jquery的一些方法。尝试尽可能多角度。

请花些时间参考angular directive documentation以更好地利用框架的这一强大功能。

指令中的jQuery函数不起作用

1 个答案: