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);

P.S。这样的指令不遵循有偏见的想法。举个例子，为什么它不好-如果在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">...

$ routeChangeSuccess内部指令不会触发

1 个答案: