角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