角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 Docs