2016-01-23 116 views
1

我为我的sidebar写了一个简单的指令来执行一些基本的动画,例如滑入并修改content类的宽度和边距。可以在Angular指令中使用jQuery来执行动画吗?

我的问题是,它是确定以这种方式使用jQuery动画:

//sidebar directive, slides in and out on click 
projectDirectives.directive('sideBar', function(){ 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs){ 
     var $sidebar = element.find('#navbar'); 
     var $content = $('.content'); 
     element.find('#nav_icon').on('click', function(event){ 
      if(!scope.navbar){ 
      scope.navbar = true; 
      scope.margin = parseInt($sidebar.css('marginLeft')); 
      scope.contentWidth = parseInt($content.css('width')); 
      $content.animate({'width':scope.contentWidth - Math.abs(scope.margin) + 'px', 
       'marginLeft':Math.abs(scope.margin) 
      }); 
      $sidebar.animate({'marginLeft':0}); 
      } else { 
      scope.navbar = false; 
      $content.animate({'width':scope.contentWidth + 'px', 
       'marginLeft': 0 
      }); 
      $sidebar.animate({'marginLeft':scope.margin+'px'}); 
      } 
     }) 
     }, 
     controller: ['$scope', function($scope){ 
     $scope.margin = null; 
     $scope.navbar = false; 
     $scope.contentWidth = null; 
     }] 
    }; 
} 

它的工作原理,但我知道有非常具体的,共同约定以怎样的角度项目的结构

回答

0

将jQuery与AngularJs混合使用是一种不好的做法,因为您可以使用AngularJs来做到这一点。

A good answer for your question.

希望这有助于!

+0

这很有道理,“角”的方式总是让我困惑,谢谢。 – ZachPerkitny

+0

@ZachPerkitny很高兴能帮到你! –