Я использую Angular 1.4.8 с Угловым интерфейсом. То, что я пытаюсь сделать, - это украсить директиву ui-sref, чтобы он выделил элемент меню (установив класс CSS «active»), если текущий $state.name соответствует состоянию 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, но мой браузер игнорирует его. Это почти похоже на то, что он добавляется после Угловое сканирование DOM для директив. Если я изменю код на:
element.parent().addClass('active');
... тогда он отлично работает. Что я делаю неправильно?
, что является неправильным с 'Ui-sref-active'? http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active – vittore
Я просто не знал об этом. Благодаря! – Amy
Я считаю, что ответ на этот вопрос. Если вы представите его в качестве ответа, я соглашусь с ним. – Amy