Question

以下是应用程序代码：

(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链接： http://plnkr.co/edit/Q7VO0RZstMBwQzH613an?p=preview

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

现在在自定义指令上方有一个Toggle按钮，它从左侧滑动菜单。这是通过链接功能使用jquery 完成的。

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

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

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

从伟大的社区寻找一些好的答案。感谢...

自定义指令

0 个答案: