Question

我使用Angular 1.4.8和Angular UI。我尝试做的是装饰ui-sref指令，这样如果当前$state.name匹配，它将突出显示一个菜单元素（通过设置CSS类＆＃39;活动＆＃39;） ui-sref州。

我测试该元素是否是我的导航标题的后代，如果是，我想在元素中添加ngClass属性。就目前而言，我只想让它们全部突出;我可以稍后添加测试以匹配状态。 true将替换为实际测试。现在我只想要active类集

.config(['$provide', ($provide: angular.auto.IProvideService) => {
    return $provide.decorator('uiSrefDirective', [
        '$delegate', ($delegate) => {
            var originalUiSref = $delegate[0];
            var originalUiSrefLink = originalUiSref.link;

            originalUiSref.compile = () => (scope, element, attrs, uiSref) => {
                var topBar = $('nav.top-bar');
                if (topBar.length > 0 && $.contains(topBar[0], element[0])) {
                    element.parent().attr('ng-class', '{ active: true }');    
                }

                originalUiSrefLink.call($delegate, scope, element, attrs, uiSref);
            };

            return $delegate;
        }
    ]);
}])

原始DOM元素：

<a ui-sref="requests">Requests</a>

添加装饰器之后，这就是我在浏览器的DOM中看到的：

<a ui-sref="requests" ng-class="{ active: true }" href="/requests">Requests</a>

大！我可以在DOM中看到添加的属性，但我的浏览器忽略了它。它几乎就像在 Angular扫描DOM指令之后添加一样。如果我将代码更改为：

element.parent().addClass('active');

...然后它运作正常。 我做错了什么？

Answer 1

Amy你不需要实现这个指令，因为angular-ui实际上已经拥有它，请检查ui-sref-active

使用装饰器添加Angular指令

1 个答案: