My jQuery function isn't working inside my directive.
This is my directive:
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>
The directive doesn't even react to the click on #pull and I have no errors in my console. Hope you understand the problem. Any help is welcome!
Your directive is restricted to Element by
restrict: 'E'
But you have put the directive as an attribute.
<div class="header" responsive-nav>
restrict: 'A' is one way to solve the problem.
Also I don't agree some of the ways you are using jquery here. Try to be angular as much as possible.
Please take some time to refer the angular directive documentation to make better use of this powerful feature of the framework.
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加