javascript - Angular ui-router 防止指令内的状态触发

Question

我有一个指令clickable-tag，我将我的data作为标签名称(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>

指令clickable-tag位于ui-sref内部(在外部a标签上)。在指令内部，我希望阻止外部 ui-sref ，而应将用户定向到另一种状态(我在下面的指令中指定的状态)。

.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});
        }
      });
    }
  };
})

问题是只有指令内指定状态的resolve运行。实际渲染的 View 具有由外部 ui-sref 指定的状态。

有关如何防止触发外部 ui-sref 的任何解决方案。而是触发指令内指定的状态更改？

如有任何帮助，我们将不胜感激。谢谢。

注意:我已经在指令中尝试过 preventDefault()、stopPropagation()、return false .

Answer 1

移动ng-repeat <a> 外部和上方标记并移动 <a> 的结束位置按钮上方的标签。

<div ng-repeat="question in questionsData.questions">

   <a class="item item-avatar"
        ui-sref="nebula.questionData({questionId: question.id})">

       <img src="{{question.user.profile_photo || '../img/avatar.jpg'}}">
       <h2 class="question-title">{{question.title}}</h2>
       <p>{{question.description}}</p>
   </a>  <!--Put close of A tag here --->

   <div class="question-tags-list" ng-repeat="tag in question.tags"
             ng-click="$state.go('nebula.tagData', {tagName: tag.tag})">

       <button type="submit" class="tag">{{tag.tag}}</button>

   </div>
</div>

有关更多信息，请参阅 AngularJS ng-click API Docs