One of the challenges I am facing involves a directive called clickable-tag, where I pass my data as the tag's name (tag.tag):
<a class="item item-avatar"
ui-sref="nebula.questionData({questionId: question.id})"
ng-repeat="question in questionsData.questions">
<img src="{{question.user.profile_photo || '../img/avatar.jpg'}}">
<h2 class="question-title">{{question.title}}</h2>
<p>{{question.description}}</p>
<div class="question-tags-list" ng-repeat="tag in question.tags" clickable-tag data="{{tag.tag}}">
<button type="submit" class="tag">{{tag.tag}}</button>
</div>
</a>
While using the clickable-tag directive within a ui-sref (on the outer a tag), I aim to prevent the default behavior and instead redirect users to another specified state:
.directive("clickableTag", function($state) {
return {
restrict: "A",
scope: {
data: "@"
},
link: function(scope, elem, attrs) {
elem.bind('click', function(ev) {
console.log('scope.tagName: ', scope.tagName);
if (scope.data) {
$state.go('nebula.tagData', {tagName: scope.data});
}
});
}
};
})
An issue arises where only the resolve of the state mentioned inside the directive is executed. The view rendered belongs to the state defined by the outer ui-sref.
I am seeking possible solutions to prevent the triggering of the outer ui-sref and initiate a state change as indicated within the directive.
Your assistance in resolving this matter would be greatly appreciated. Thank you.
Please note: Attempts have been made using preventDefault(), stopPropagation(), and return false within the directive without success.