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

【问题标题】：Angular custom directive JQuery animate doesn't move the elementAngular 自定义指令 JQuery animate 不移动元素
【发布时间】：2016-03-30 06:17:03
【问题描述】：

我有一个自定义的角度指令，所以当你点击元素时它会向下移动： 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

【问题讨论】：

动画效果很好，你的css不正确

标签： javascript jquery angularjs angular-directive

【解决方案1】：

更改top 属性时，您需要具有固定或绝对定位才能使其生效。你的笨蛋都没有。添加position:absolute; 和初始top:100px; 就可以了。

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

【讨论】：

【解决方案2】：

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

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  
    };
});

【讨论】：