$ routeChangeSuccess внутри директивы не срабатывает

Question

У меня есть директива в заголовке навигации.Смысл в том, чтобы добавить / удалить активный класс.Это делается путем подключения к $ routeChangeSuccess и просмотра якорей, где href - это имя маршрута.

angular.module('frApp')
    .directive('bsActiveLink', ['$location', function ($location) {
        return {
            restrict: 'A', //use as attribute 
            replace: false,
            link: function (scope, elem) {
                //after the route has changed
                scope.$on("$routeChangeSuccess", function () {
                    console.log("Route changed");

                    var hrefs = ['/#' + $location.path(),
                    '#' + $location.path(), //html5: false
                        $location.path()]; //html5: true

                    angular.forEach(elem.find('a'), function (a) {
                        a = angular.element(a);
                        if (-1 !== hrefs.indexOf(a.attr('href'))) {
                            a.parent().addClass('active');
                        } else {
                            a.parent().removeClass('active');
                        }
                    });
                });
            }
        };
    }]);


div class="col-3" style="vertical-align: middle;" bs-active-link>
                <ul class="nav navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="/unpaid">Unpaid</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/paid">Paid</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/recon">Recon</a>
                    </li>
                </ul>
            </div>

Основная проблема заключается в том, что это событие не вызывается при начальной загрузке.Теперь обычно это не проблема, как вы можете видеть, я установил один по умолчанию, и у меня есть перенаправление angularjs на это.Но если я помещу другой маршрут прямо в адресную строку, он загрузит его, но визуально по умолчанию в маршруте «/ unpaid» есть активный класс.Если я удаляю активный класс по умолчанию в HTML, то ничего не активно.Я вижу, что мой $ routeChangeSuccess еще не перехватывается при загрузке страницы.

Мне кажется, что директивы не могут полагаться на этот обработчик событий при запуске?Какой обходной путь к этому?

Answer 1

Вы пробовали что-то вроде:

link: function (scope, elem) {
    function update(...) {}
    // just call here
    update();
    scope.$on("$routeChangeSuccess", update);

PS Такие директивы не следуют угловым идеям.В качестве примера, почему это плохо - если в какой-то момент новый элемент появляется в DOM - он не будет охватываться директивой.Например, посмотрите на ui-router и вы увидите, как это должно быть сделано:

~something like this~~
<div>
   <a href="/unpaid" my-active-if="unpaid">... // <- custom directive on each href, sp no weird find required
   <a href="/paid" my-active-if="paid">...