我正在将jQuery插件转换为Angular指令,但仍然无法正常工作,或者:根本无法正常工作。
这是我想要实现的行为
这里也是一个jsfiddle
请记住,我想要实现的只是左侧边栏上到处显示"粘性"的行为。
我用jQuery做到了(我是Angular的新手),我需要让它与Angular一起工作。请去看看 Plunkr 示例,这种行为是我想要的。如果你们中的一些人花时间帮助我,请提前感谢。
看看jQuery代码:
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 85;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 50
});
};
});
});
这是我的角度指令:
angular.module('capilleira.clickAndGambleWebApp.directives', [])
.directive('sticky', function ($window) {
return {
restrict: 'A',
controller: ($scope)
link: function (scope, element, attrs) {
var raw = element[0],
offset = element.offset(),
topPadding = 85;
angular.element($window).bind('scroll', function () {
console.log('SCROOOOOOOOOOOOOLLLL');
if ($window.scrollTop > offset.top) {
raw.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
}
});
}
}
});
我的指令擅长于一旦你滚动,the console.log
就会出现。
我已经让它工作了,我的朋友们。这是正常工作的指令
angular.module('capilleira.clickAndGambleWebApp.directives', [])
.directive('sticky', function($document) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
angular.element(document).ready(function() {
var offset = element.offset(),
topPadding = 85;
$document.scroll(function() {
if ($document.scrollTop() > offset.top) {
element.stop().animate({
marginTop: $document.scrollTop() - offset.top + topPadding
});
} else {
element.stop().animate({
marginTop: 0
});
};
});
});
}
};
});