Директива AngularJS для мобильной навигации
Я пытаюсь создать директиву AngularJS для переключения моей мобильной навигации, но она не работает. Что я делаю неправильно?
Директива
app.directive('mobileDirective', function(){
return {
restrict: 'A',
link: function (scope, element, attrs){
element.bind('onclick', function(){
var status = element[0].className = "is-o";
if(status){
element[0].className = ".mobile-nav-toggle mobile-nav";
}else{
element[0].className = ".mobile-nav-toggle mobile-nav is-o";
}
});
}
}
});
Index.html
<header data-ng-controller="navController">
<div class="header-position">
<a href="/" class="logo img-responsive"><img src="./assets/images/codehan_logo_raw.svg" class="mobile-logo" /></a>
<nav id="nav" class="site-nav">
<ul>
<li data-ng-repeat="item in menu_items">
<a data-ng-class="{ active: isActive('/{{item.name}}')}" href="{{item.name}}">{{item.name}}</a>
</li>
</ul>
</nav>
<div class="mobile-nav-toggle mobile-directive"><span></span></div>
</div>
<div id="m-nav" class="mobile-nav mobile-directive">
<ul>
<li data-ng-repeat="item in menu_items">
<a data-ng-class="{ active: isActive('/{{item.name}}')}" href="{{item.name}}">{{item.name}}</a>
</li>
</ul>
</div>
</header>
С jQuery это выглядит так и работает нормально
function mobileNav(){
$('.mobile-nav-toggle').on('click', function(){
var status = $(this).hasClass('is-o');
if(status){
$('.mobile-nav-toggle, .mobile-nav').removeClass('is-o');
}else{
$('.mobile-nav-toggle, .mobile-nav').addClass('is-o');
}
});
}
1 ответ
Для протокола (я знаю, что это древний), я почти уверен, что проблема могла быть в этой строке;
var status = element[0].className = "is-o";
Вы устанавливаете status
а также element[0].classname
в "is-o"
вместо этого он должен читать;
var status = element[0].className === "is-o";
Имея в виду status
равно каков результат element[0].className === "is-o"
это.. Я не уверен, что это решение как таковое, но для такого старого поста, я даже не уверен, почему я указываю на эту ошибку.