使用decorator添加Angular指令

Question

我使用的是带有Angular UI的Angular 1.4.8。我想做的是修饰ui-sref指令，以便在当前$state.name与ui-sref状态匹配的情况下（通过设置CSS类"active"）高亮显示菜单元素。

我测试元素是否是nav标头的派生，如果是，我想向元素添加一个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