6
jQueryプラグインをAngular Directiveに変換しても、まだ正しく動作していない、または全く動作していません。jQueryをAngular、Fixedサイドバーにしない(?)
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
が表示されます。
私の期待は、これらのリンクの1つが働いてjQueryのバージョンになる予定だったし、1があなたの未遂(ただし、動作していない)の角度コードであることを行った正常に動作しディレクティブです。それらは角度コードと同じリンクであるように見え、それが何をしているのか完全にはっきりしていません。必要なものが明らかであれば、より多くの助けが得られるでしょう(そして、jsfiddle/plunkrがjQueryのコードを使っていると思われます)。 – Jack
@ジャックあなたが言うように私はそれをしましたが、なぜ私がやった最後の変更が決して救われたのかわかりません。 [これを見て、私はそれをもう一度やった](http://plnkr.co/edit/xRXOqzaXxg6hVXDhOfV2?p=preview)同じscript.jsファイルのjQuery関数とその下のノートには、Angular指令。私が達成したい動作は、左側のサイドバーにある「スティックキー」のどこかにあるものです。 – TheUnnamed
@MarkRentonあなたが言うとき:「Angularで動作させる必要がある」ということは、jQueryなしで動作させる必要があるということですか? jQueryがまだ読み込まれている場合は、それを角度の横に使うことができます。したがって、あなたのディレクティブhttp://jsbin.com/puhapasaka/3/edit?js – hitautodestruct