angularjs - 有条件地应用 AngularJS 指令（ui-scrollfix）

Question

我正在使用 UI.Utils 中的 ui-scrollfix 指令来制作所谓的粘性标题。它工作正常。应用程序中有两个标题。主要的始终在页面上，而第二个仅出现在某些页面中。

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

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

我需要做的是ui-scrollfix添加或应用该指令main-header（如果second-header存在）。

这有可能实现吗？

谢谢！

Answer 1

我认为应该通过将两个标题包装在一个指令中来做到这一点 say 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