0
我正在尝试使用Angular-strap的$ affix服务以编程方式将附加行为附加到3个不同的元素上;其中两个必须响应目标浏览器是否大致为桌面宽度或更大（在这种情况下，它们不得附加），并且第三个必须始终附加。一个复杂的因素是接收设备是桌面浏览器还是移动设备（无论所述移动设备处于横向模式还是纵向模式），因为存在各种设备断点所需的风格调整，并且这驱动了变化到这三个要素的补缀偏移量。
为此，我设法将处理这些不同情况的一些逻辑放在一起，并保持理智我已经找到了在我的Angular应用程序附加的自己指令中使用$ affix的逻辑。我还隔离了在自己的指令中检测orientationchange事件的逻辑，并且在我的affix指令中，我有一个回调设置，用于调用orient :: change，它调用我的handleFixes（）函数，该函数又调用我的helper函数（重新计算正确的偏移量），然后在每个贴上的元素上调用$ affix（）来更新其行为。
理论上这应该很好。在实践中，它看起来像$贴子服务是无法附加回调“滚动”，“点击”或“调整大小”的事件，因为它期待targetEl是一个元素，但它是未定义的。结果，$ affix根本不工作。
我认为发生了什么事情是我的指令定义没有正确地将预期的目标元素（BODY标签）传递到$ affix，但可能不是它的结尾。
这里是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() {
/* This nav hides at narrower breakpoints; so we need to know if it's visible; if so, we just return its current offset; if not, we determine its current offset relative to the 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 into string; used to prevent $affix from trying to call .match() on a 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 for running everything; will 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 };
// EVERYTHING WORKS GREAT *UP TO THIS POINT*
// NOW WE MUST $affix() ELEMENTS!
$affix(e1, e1Data);
$affix(e2, e2Data);
$affix(e3, e3Data);
};
/* If you get "orient::change", update fixatives' offsets */
scope.$on('orient::change', function() {
handleFixes();
});
/* Trip our call to activate */
handleFixes();
}
};
return afixDirectiveObject;
});
FTR，我运行这段代码有角1.2.23 &角带2.1.0。
在此先感谢您的任何建议或见解。
好吧，我已经想通了，我需要抓住BODY标签，并将它作为我用来调用$ affix的选项对象上的“目标”属性附加;至少解决了错误，但$贴子调用没有达到预期的效果 - 即我要添加到BODY的元素实际上不会在我滚动页面时显示附加行为。任何指针？ – Beatbug 2015-03-31 20:45:42