Angular自定义指令JQuery animate不会移动元素

时间:2015-12-23 18:55:18

标签: javascript jquery angularjs angular-directive

我有一个自定义角度指令,因此当您单击该元素时它将向下移动: angular.module('plunker',[])

.controller('AnimateCtlr', function(){

})
.directive('clickToAnimate', function(){
  var linker = function(scope, element, attrs) {

        element.bind('click', function(){
        console.log('moving');
        console.log( $( this).text() );
        $(this).animate({top: '+=150'});
      });
    };

    return {
        restrict: 'AE',
        replace: false,
        scope: {
            direction : '@'
        },
        link: linker  
    };
});

所有的console.log都可以检测到点击事件,但问题是,div根本不会移动。这可能有什么问题?

Plunker在这里:http://plnkr.co/edit/j1OMiZFrar71P742dY6W?p=preview

2 个答案:

答案 0 :(得分:3)

如果你在元素上将位置设置为绝对,那么它应该可以正常工作

JS:

angular.module('plunker', [])
.controller('AnimateCtlr', function(){

})
.directive('clickToAnimate', function(){
  var linker = function(scope, element, attrs) {

        element.bind('click', function(){
        console.log('moving');
        console.log( $( this).text() );

        $(this).css({position: 'absolute'}) // can be done right here! But belongs in your CSS really.

        $(this).animate({top: '+=150'}, 300, function(){
          console.log('complete')
        });
      });
    };

    return {
        restrict: 'AE',
        replace: false,
        scope: {
            direction : '@'
        },
        link: linker  
    };
});

答案 1 :(得分:2)

更改top属性时,您需要具有固定或绝对定位才能生效。你的掠夺者既没有。添加position:absolute;和初始top:100px;就可以了。

http://plnkr.co/edit/FTY5iF72KZkRGnIOcm7C?p=preview