Question

我为sidebar编写了一个简单的指令来执行一些基本的动画，例如滑入并修改content类的宽度和边距。

我的问题是以这种方式使用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;
      }]
    };
}

它有效，但我知道Angular项目的结构有非常具体和常见的约定

Answer 1

将jQuery与AngularJs混合是一种不好的做法，因为你可以使用AngularJs。

A good answer for your question.

希望这有帮助！

在Angular指令中使用jQuery来执行动画是否可以？

1 个答案: