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

Angular ui-router阻止指令内的状态触发器

1 个答案: