$routeChangeSuccess inside 指令不会触发答案

【问题标题】：$routeChangeSuccess inside directive doesn't fire$routeChangeSuccess inside 指令不会触发
【发布时间】：2019-02-14 21:55:49
【问题描述】：

我在导航标题中放置了一个指令。它的重点是添加/删除活动类。它通过挂钩 $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 路由重定向到此。但是，如果我将另一条路线直接放入地址栏中，它将加载该路线，但在视觉上默认的“/未付费”路线上有活动类。如果我删除 html 中的默认活动类，则没有任何活动。我看到页面加载时我的 $routeChangeSuccess 还没有被钩住。

在我看来，指令在启动时不能依赖这个事件挂钩？解决方法是什么？

【问题讨论】：

标签： angularjs

【解决方案1】：

您是否尝试过类似的方法：

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

附：这样的指令不遵循角度的想法。举个例子，为什么它不好 - 如果在某些时候新元素出现在 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">...

【讨论】：