我有一个自定义 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
最佳答案
如果你在元素上将位置设置为绝对位置,那么它应该可以正常工作
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
};
});
关于javascript - Angular 自定义指令 JQuery animate 不会移动元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34442003/