我正在支持AngularJS项目并陷入缺陷。
有一个指令fsm-sticky-header：
<thead fsm-sticky-header scroll-body="#orderDiv" test-view= "'#test3'" scroll-stop="0" scrollable-container="'#leftList'">
此指令用于具有不同属性值的3个位置。 最初3次出现的指令被调用3次。
但是当我点击页面上的某些内容之后，整个页面再次重新加载，现在该指令只被调用了2次而不是3次。 第3个指令的HTML标记（未调用指令的标记）上方和下方的HTML工作正常。
由于AngularJS知识有限，我甚至无法想象出一个原因，因为这种情况正在发生。 如果调用其他指令，如何不调用特定的指令？
指令的HTML代码：
<table id="priceCheckTab">
<thead ng-show="($root.hideDetailFull && $root.hideList && !$root.hideListFull) ||($root.hideDetailFull && !$root.hideList && $root.hideListFull)"
fsm-sticky-header scroll-body="#priceCheckTab" test-view= "'#test3'" scroll-stop="0" scrollable-container="'#leftList'">
<tr ng-show="$root.customPriceCheck" style="background-color: white">
<th colspan="10" style="text-align: left">
<h2 class="l-section-heading">Price Check <span
ng-if="!$root.customPriceCheck" class="item-list__price-check_maximize"
ng-click="togglePriceCheckList()"> </span>
<span ng-if="$root.customPriceCheck" class="item-list__price-check_minimize"
ng-click="togglePriceCheckList()"> </span>
</h2>
</th>
</tr>
<tr>
<th></th>
<th></th>
<th colspan="2">Product</th>
<th>Date created</th>
<th style="word-break:normal" >Created by</th>
<th class="fullViewList" style="display:none">Q2A Ref No.</th>
<th class="fullViewList" style="display:none">Term</th>
<th class="fullViewList" style="display:none"> NRC</th>
<th class="fullViewList" style="display:none"> MRC</th>
</tr>
</thead>
第二次发生是类似的。 HTML中指令的第三次出现：
<table id="orderDiv">
<thead fsm-sticky-header scroll-body="#orderDiv" test-view= "'#test3'" scroll-stop="0" scrollable-container="'#leftList'">
<tr>
<th style="width: 1.4%"></th>
<th style="width: 2%" ng-if="!$root.hideListFull"></th>
<th style="width: 3%" ng-if="$root.hideListFull"></th>
<th style="width: 2.0%" colspan="2"ng-if="!$root.hideListFull">Product</th>
<th style="width: 1.0%" colspan="2"ng-if="$root.hideListFull">Product</th>
<th style="width: 18.6%">Date of Application</th>
<th style="width: 16.7%;word-break: break-word">Submitted by</th>
<th style="width: 26.6%;word-break:normal">Work Required</th>
<th style="width: 15.3%" ng-if="!$root.hideListFull">Q2A Ref No.</th>
<th style="padding-left:1%;width: 18%" ng-if="!$root.hideListFull">Customer Reference</th>
</tr>
</thead>
上面的HTML工作正常，但不会调用该指令。
指令JS文件：
'use strict';
(function(angular){
var fsm = angular.module('fsm', []);
fsm.directive('fsmStickyHeader', ['$rootScope','$timeout', function($rootScope, $timeout){
return {
restrict: 'EA',
replace: false,
scope: {
scrollBody: '@',
scrollStop: '=',
scrollableContainer: '=',
contentOffset: '=',
testView: "=",
fullView : '='
},
link: function(scope, element, attributes, control){
console.log(scope.scrollBody);
var test=$(scope.testView);
var fullView = $(scope.fullView);
var content,
header = $(element, this),
clonedHeader = null,
scrollableContainer = $(scope.scrollableContainer),
contentOffset = scope.contentOffset || 0;
var unbindScrollBodyWatcher = scope.$watch('scrollBody', function(newValue, oldValue) {
content = $(scope.scrollBody);
init();
unbindScrollBodyWatcher();
});
if (scrollableContainer.length === 0){
scrollableContainer = $(window);
}
function setColumnHeaderSizes() {
if (clonedHeader.is('tr') || clonedHeader.is('thead')) {
var clonedColumns = clonedHeader.find('th');
header.find('th').each(function (index, column) {
var clonedColumn = $(clonedColumns[index]);
clonedColumn.css( 'width', column.offsetWidth-16 + 'px');
});
}
};
function determineVisibility(){
var scrollTop = scrollableContainer.scrollTop() + test.offset().top;
var contentTop = content.offset().top+scrollableContainer.scrollTop()+contentOffset;
var contentBottom =contentTop+content.outerHeight(false)-100;
if ( (scrollTop > contentTop) && (scrollTop < contentBottom) ) {
if (!clonedHeader){
createClone();
clonedHeader.css({ "visibility": "visible"});
}
if ( scrollTop < contentBottom && scrollTop > contentBottom - clonedHeader.outerHeight(false) ){
//var top = contentBottom - scrollTop + scope.scrollStop - clonedHeader.outerHeight(false);
//clonedHeader.css('top', top + 'px');
clonedHeader.css({
top: test.offset().top-$(window).scrollTop()+test.height()
});
} else {
calculateSize();
}
} else {
if (clonedHeader){
/*
* remove cloned element (switched places with original on creation)
*/
header.remove();
header = clonedHeader;
clonedHeader = null;
header.removeClass('fsm-sticky-header');
header.css({
position: 'relative',
left: 0,
top: 0,
width: 'auto',
'z-index': 0,
visibility: 'visible',
'background-color' :''
});
}
}
};
function calculateSize() {
clonedHeader.css({
top: test.offset().top-$(window).scrollTop()+test.height(),
width: header.outerWidth(),
left: header.offset().left
});
if(scope.scrollBody==="#myTable1" || scope.scrollBody==="#myTable" || scope.scrollBody==="#ServiceInventoryTab"
|| scope.scrollBody==="#ServiceInventoryTab2" || scope.scrollBody==="#ServiceInventoryTab3" || scope.scrollBody==="#ServiceInventoryTab4" ) {
setColumnHeaderSizes();
}
};
function createClone(){
/*
* switch place with cloned element, to keep binding intact
*/
clonedHeader = header;
header = clonedHeader.clone();
clonedHeader.after(header);
clonedHeader.addClass('fsm-sticky-header');
clonedHeader.css({
position: 'fixed',
'z-index': 3,
visibility: 'hidden',
'background-color' :'white'
});
calculateSize();
};
$(function(){
$(window).scroll(function(){
if(clonedHeader) {
clonedHeader.removeClass('fsm-sticky-header');
clonedHeader.css({
visibility: 'hidden'
});
}
});
});
//Function to call on various events on Price Check page for adjusting the sticky header
function updateHeader(){
/*if(clonedHeader){
header.remove();
header=clonedHeader.clone();
clonedHeader.after(header);
header.removeClass('fsm-sticky-header');
header.css({
position: 'relative',
left: 0,
top: 0,
width: 'auto',
'z-index': 0,
visibility: 'visible'
});
}*/
determineVisibility();
}
function init() {
scrollableContainer.on('scroll.fsmStickyHeader', determineVisibility).trigger("scroll");
fullView.on("click.fsmStickyHeader", determineVisibility);
$("#roleCreate").on("click.fsmStickyHeader", determineVisibility);
scrollableContainer.on('resize.fsmStickyHeader', determineVisibility);
//For Service Inventory
$("#innerEB").on("click.fsmStickyHeader", function () {
determineVisibility();
});
//For Service Inventory
$("#innerEA").on("click.fsmStickyHeader", function () {
determineVisibility();
});
//For Service Inventory
$("#innerMLLSDH").on("click.fsmStickyHeader", function () {
determineVisibility();
});
//For Service Inventory
$("#innerMLLEthernet").on("click.fsmStickyHeader", function () {
determineVisibility();
});
$("#fullview2").on("click.fsmStickyHeader", function () {
updateHeader();
});
$("#priceBody").on("click.fsmStickyHeader", function () {
updateHeader();
});
$("#quoteBody").on("click.fsmStickyHeader", function () {
updateHeader();
});
scope.$on("roleRow", function (event, args) {
determineVisibility();
});
$rootScope.$on("cancelEditUser", function () {
scrollableContainer.scrollTop(scrollableContainer.scrollTop()+1);
});
$rootScope.$on("cancelEditRole", function() {
scrollableContainer.scrollTop(scrollableContainer.scrollTop()+1);
});
$rootScope.$on("userRow", function () {
determineVisibility();
scrollableContainer.scrollTop(scrollableContainer.scrollTop()+1);
});
scope.$on("inventoryRow", function (event, args) {
determineVisibility();
});
scope.$on('$destroy', function() {
scrollableContainer.off('.fsmStickyHeader');
});
}
$rootScope.$on('updateStickyHeader', function () {
$timeout(function () {
scrollableContainer.scrollTop(scrollableContainer.scrollTop()+1);
}, 0, false);
});
}
};
}]);
})(window.angular);