使用装饰器添加 Angular 指令
Adding Angular directive using decorator
我正在使用 Angular 1.4.8 和 Angular UI。我想要做的是修饰 ui-sref
指令,这样它将突出显示一个菜单元素(通过设置 CSS class 'active')如果当前 $state.name
匹配 ui-sref
状态。
我测试该元素是否是我的导航 header 的后代,如果是,我想向该元素添加一个 ngClass
属性。现在,我只想让它们都突出显示;我可以稍后添加匹配状态的测试。 true
将替换为实际测试。现在我只想要 active
class set
.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');
...然后它工作正常。 我做错了什么?
Amy 你不需要实现这个指令因为 angular-ui 实际上已经有了它,请检查 ui-sref-active
我正在使用 Angular 1.4.8 和 Angular UI。我想要做的是修饰 ui-sref
指令,这样它将突出显示一个菜单元素(通过设置 CSS class 'active')如果当前 $state.name
匹配 ui-sref
状态。
我测试该元素是否是我的导航 header 的后代,如果是,我想向该元素添加一个 ngClass
属性。现在,我只想让它们都突出显示;我可以稍后添加匹配状态的测试。 true
将替换为实际测试。现在我只想要 active
class set
.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');
...然后它工作正常。 我做错了什么?
Amy 你不需要实现这个指令因为 angular-ui 实际上已经有了它,请检查 ui-sref-active