我正在将jQuery插件转换为Angular Directive,但仍然无法正常工作,或者:根本不工作。
This is the behavior I want to achieve
请记住,我想用此实现的只是左侧边栏上的行为,到处都是“粘性”。
我是用jQuery做的(我是Angular的新手),我需要让它与Angular一起工作。请去查看Plunkr Example,这种行为是我想要的。如果你们中的一些人花时间帮助我,请提前致谢。
查看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
就会出现。
答案 0 :(得分:1)
我的朋友已经在工作了。这是指令正常工作
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
});
};
});
});
}
};
});