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

Popular posts from this blog

cakephp - simple blog with croogo -

How to group boxplot outliers in gnuplot -

bash - Performing variable substitution in a string -