2016-01-23 61 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很高興能幫到你! –

相關問題