用于移动导航的 AngularJS 指令答案

【问题标题】：AngularJS directive for mobile navigation用于移动导航的 AngularJS 指令
【发布时间】：2016-12-01 21:10:12
【问题描述】：

我正在尝试构建一个 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');
    }
  });
}

【问题讨论】：

您使用mobile-directive 作为类名。但是，它仅限用作attribute。换一个试试。
改了..还是不行:(
您能否提供一个能重现该问题的插件？

标签： angularjs mobile angularjs-directive navigation angularjs-bindings

【解决方案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" 的结果是什么。我不相信这是一个解决方案，但对于这么老的帖子，我什至不确定我为什么要指出这个错误。

【讨论】：