Javascript 自定义指令中的Angular Js Animate函数

以下是应用程序代码：

(function(){

  var myApp = angular.module('myApp', ['ngRoute']);

  myApp.config(function($routeProvider){
    $routeProvider
      .when('/', {
        templateUrl: 'home.html'
      })
      .when('/about', {
        templateUrl: 'about.html'
      })
      .when('/contact', {
        templateUrl: 'contact.html'
      })
      .otherwise({
        templateUrl: 'home.html'
      })
  })

  myApp.directive('menuRight', function(){

    return {
      restrict: 'E',
      replace: true,
      templateUrl: 'menu.html',
      link: function(scope, elem, attrs) {
        var mB = document.getElementsByClassName('menuBtn');
        var m = document.getElementsByClassName('menu');
        var menu = angular.element(m);
        var menuButton = angular.element(mB);

        menu.css({
          "left": -100 + "px"
        });

        menuButton.click(function(){
            if(menu.hasClass('visible')) {
                menu.animate({'left': -100 + 'px'}, 200).removeClass('visible');
            } else {
                menu.animate({'left': 0}, 400).addClass('visible');
            }
        });
      }
    }

  })

})()

索引文件有三个标记：

<div ng-view></div>
<button class="menuBtn">Toggle Menu</button><br><br>
<menu-right></menu-right>

切换菜单

此代码工作正常。 运行Plunker链接：

这段代码做了两件事。 1.加载显示菜单的自定义指令。 2.路由到3页主页，关于，通过该指令联系

现在，在自定义指令上方有一个切换按钮，可从左侧滑动菜单。这是通过使用jquery的链接函数实现的

此指令使用jquery执行幻灯片效果

现在我的问题是： 我想改进这段代码。使用角度动画。 或者在指令中使用控制器

菜单模板中的第一个li应用了一个活动类。但是，当我从菜单中单击其他li标记时，我需要将活动类从/更改为单击的li

从伟大的社区中寻找一些伟大的答案。 谢谢