AngularJS 지시문 (ui-scrollfix)을 조건부로 적용하십시오.

Question

UI를 사용하고 있습니다 .Utils에서 ui-scrollfix 지시문을 사용하여 끈적한 헤더를 만듭니다. 그것은 잘 작동합니다. 앱에 두 개의 헤더가 있습니다. 메인 페이지는 끊임없이 페이지에 있고 두 번째 페이지는 특정 페이지에만 나타납니다. 내가해야 할 일은

<div id="main-header" ui-scrollfix></div> 

<div id="second-header" ui-scrollfix></div> 

는 second-header가있는 경우 ui-scrollfix 지시어, main-header에 추가되거나 적용된 것입니다.

달성 할 수 있습니까?

감사합니다.

Answer 1

지시문에 두 헤더를 모두 넣으면이 작업을 수행해야한다고 생각합니다. headers. 그런 다음 두 번째 헤더에 대한 지시문에서 두 번째 헤더가있는 경우 ui-scrollfix 지시문을 적용하십시오.

HTML

<div ng-app='app' ng-controller="aController"> 
    <div headers> 
     <div id="main-header"> main header </div> 
     <div id="second-header" ui-scrollfix> second header </div> 
    </div> 
</div> 

JS

var app = angular.module('app', []); 

app.controller('aController', ['$scope', function (scope) { 
}]).directive('uiScrollfix', [function() { // this is just to check that the directive is applied to the element 
    return { 
     restrict: 'A', 
     link: function (scope, el, attrs) { 
      el.on('click', function() { 
       console.log(el[0].textContent); 
      }); 
     } 
    } 
}]).directive('headers', ['$compile', function ($compile) { 
    return { 
     restrict: 'A', 
     link: function (scope, el) { 
      var directiveEl = el[0], 
       mainHeaderEl = directiveEl.querySelector('#main-header'), 
       secondHeaderEl = directiveEl.querySelector('#second-header'), 
       $mainHeaderEl = angular.element(mainHeaderEl); 

      if (secondHeaderEl) { 
       $mainHeaderEl.attr('ui-scrollfix', ''); 
       $compile($mainHeaderEl)(scope); 
      } 
     } 
    } 
}]); 

JSFIDDLE