有條件地應用AngularJS指令（ui-scrollfix）

我使用UI.Utils中的ui-scrollfix指令來創建所謂的粘性頭。它工作正常。應用中有兩個標題。主要是一直在頁面上，第二個只出現在某些頁面上。有條件地應用AngularJS指令（ui-scrollfix）

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

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

我需要做的是，ui-scrollfix指令被添加或應用到main-header，如果second-header存在。

是否有可能實現？

謝謝！

來源

2015-02-06 Mitya Ustinov

我認爲應該通過將兩個標頭包裝在一個指令中，例如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>

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

來源

2015-02-06 12:46:55 dcodesmith

有條件地應用AngularJS指令（ui-scrollfix）

回答

相關問題