角度UI路由器防止狀態觸發指令內部

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 。 實際渲染的視圖處於外部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文檔