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

我认为应该通过将两个标题包装在一个指令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

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

1 个答案: