javascript - 使用装饰器添加 Angular 指令

Question

我正在使用 Angular 1.4.8 和 Angular UI。我想做的是装饰 ui-sref 指令，以便它会突出显示菜单元素(通过设置 CSS 类“active”)，如果当前 $state.name 与 ui-sref 状态匹配。

我测试该元素是否是我的导航 header 的后代，如果是，我想向该元素添加一个 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

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