Использовать директиву AngularJS (ui-scrollfix) условно

Question

Я использую директиву ui-scrollfix из UI.Utils, чтобы сделать так называемый липкий заголовок. Он работает нормально. В приложении есть два заголовка. Главная страница постоянно находится на странице, а вторая отображается только на определенных страницах.

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

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

Что мне нужно сделать, это то, что ui-scrollfix директива была добавлена ​​или применяться к main-header, если second-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