angularjs - Angular-strap $affix service instantiation issue -
i'm trying use angular-strap's $affix service programmatically attach affix behavior 3 different elements; 2 of these must respond whether target browser desktop-width or greater (in case must not affix), , third must affix. complicating factor whether or not receiving device either desktop browser or mobile device (& further whether said mobile device either in landscape or portrait mode), because there stylistic adjustments required various device breakpoints, , drives changes affix offsets these 3 elements.
to end i've managed put logic handling these different cases, , keep sane i've located logic use of $affix within own directive attached angular app. i've isolated logic detecting orientationchange events in own directive, , within affix directive i've got callback setup trip on orient::change, calls handlefixes() function, in turn calls helper functions (to recalculate proper offsets) , calls $affix() on each affixed element update behavior.
in theory should work fine. in practice looks $affix service unable attach callbacks "scroll", "click" or "resize" events, because it's expecting targetel element instead it's undefined. result, $affix isn't working @ all.
i think what's happening directive definition isn't communicating intended target element (the body tag) $affix, may not end of it.
here's directive definition edited:
// n.b. deliberate mis-spelling of "affix" below searchfilter.directive('aptafix', function($affix, $window) { var afixdirectiveobject = { link: function(scope, element, attrs) { // helpers: var ondesktop = function () { var win = $(window), windowwidth = win.width(), mindesktopwidth = 959; return (windowwidth > mindesktopwidth); }, getdevclass = function () { var win = $(window), winwidth = win.width(), mindesktopwidth = 959; if (winwidth > mindesktopwidth) { return "desktop"; } else { return "device"; } }, // affix-specific logic getfirstnavoffset = function () { /* nav hides @ narrower breakpoints; need know if it's visible; if so, return current offset; if not, determine current offset relative secondary nav */ var visible = $('.primary-nav-wrap').is(':visible'), second, secondoff, out; if (getdevclass() === "desktop") { out = 100000; } else { second = $('.secondary-nav-wrap'); secondoff = second.offset(); if (secondoff && secondoff.top) { out = secondoff.top + (visible ? 40 : 10); } else { out = 0; } } // transform answer string; used prevent $affix trying call .match() on numeric offset (causing borkage): return out+""; }, getsecondnavoffset = function () { var second, secondoff, out; if (getdevclass() === "desktop") { out = 100000; } else { second = $('.secondary-nav-wrap'); secondoff = second.offset(); if (secondoff && secondoff.top) { out = secondoff.top + 10; } else { out = 0; } } return out+""; }, getlockbaroffset = function () { var lock = $('#lockbar'), lockoff = lock.offset(), out; if (lockoff && lockoff.top) { out = lockoff.top + (ondesktop() ? 60 : 30); } else { out = 0; } return out+""; }, // our utility function running everything; run // @ start & on orient::change events handlefixes = function () { var win = angular.element($window), e1 = angular.element('.primary-nav-wrap'), e2 = angular.element('.secondary-nav-wrap'), e3 = angular.element('#lockbar'), e1data = { offsettop: getfirstnavoffset(), target: win }, e2data = { offsettop: getsecondnavoffset(), target: win }, e3data = { offsettop: getlockbaroffset(), target: win }; // works great *up point* // must $affix() elements! $affix(e1, e1data); $affix(e2, e2data); $affix(e3, e3data); }; /* if "orient::change", update fixatives' offsets */ scope.$on('orient::change', function() { handlefixes(); }); /* trip our call activate */ handlefixes(); } }; return afixdirectiveobject; }); ftr, i'm running code angular 1.2.23 & angular-strap 2.1.0.
thanks in advance suggestions or insight.
gah, went wrong way. figured out reason didn't seem have target element wasn't explicitly passing "target" option $affix(). on assumption appropriate target tried using $('body').
when became apparent still wasn't having intended effect -- is, nothing wanted affix page affixing page, despite absence of errors in console log -- decided figure out how bs-affix works, found definition in source code , voila! clear day, attempts resolve provided target element, lacking resolves "angular.element($window)". didn't have $window readily available in directive, after adding alongside $affix service in injected parameters, used instead of "$('body')" , things working intended.
i hope helpful else who's looking use $affix service non-trivial element affixing angular-strap.
Comments
Post a Comment