директива ui-sref
не позволяет сделать такое же поведение, как при использовании ng-href
. Для обхода этого ограничения можно написать свою директиву.
.directive("uiSrefDisabledIf", function($compile) {
return {
priority: 1, //ставим приоритет, чтобы наша директива обрабатывалась раньше чем ui-sref
link: function(scope, el, attr) {// функция выполняется один раз при сопоставлении директивы с html элементом
//сохраняем значение атрибутов
var uiSref = attr.uiSref,
condition = attr.uiSrefDisabledIf;
el.removeAttr('ui-sref-disabled-if');//удаляем с элемента нашу директиву, чтобы при вызове
//функции ниже не попасть в бесконечный цикл
$compile(el)(scope);
scope.$watch(function() {//устанавливаем наблюдателя за значением. которое установлено нашей директиве
return scope.$eval(condition)
},
function(conditionValue) {//если значение поменялось
if(conditionValue){//если поменялось на true
//убираем атрибуты, которые могут добавить href
el.removeAttr('ui-sref');
el.removeAttr('href');
}else{//иначе
//добавляем ui-sref с исходным значением
el.attr('ui-sref',uiSref);
}
//заново связываем элемент со значениями из scope
$compile(el)(scope);
});
}
};
});
использовать ее можно так
<a ui-sref="page({page: '1'})" ui-sref-disabled-if="disabled">State 1</a>
<a ui-sref="page({page: '2'})" ui-sref-disabled-if="!disabled">State 2</a>
Попробовать можно на рабочем примере