angularjs - Angular UI-Router ui-sref 忽略一些元素

Question

我对uiSref有一个有趣的问题指令，我无法在网络上的任何地方找到解决方案(无论如何都是一个优雅的解决方案)。基本上，我的客户要求能够单击资源表中的一行并转到该资源的编辑 View 。通常是uiSref指令工作得很好，但问题在于我在最后一个<td>中有一个Bootstrap下拉列表 table 上有一堆快速操作。 HTML 看起来像这样:

<table class="table table-bordedered table-hover">
  <thead>
    <tr>
      <td>Name</td>
      <td>Actions</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="resource in resources" ui-sref="edit({id: resource.id})">
      <td ng-bind="resource.name"></td>
      <td class="actions-column">
        <div class="btn btn-xs btn-default" data-toggle="dropdown">
          <i class="fa fa-cog"></i>
        </div>
        <ul class="dropdown-menu pull-right">
          <li>
            <a href="javascript:void(0)" ng-click="doSomethingCrazy(resource)">SOMETHING CRAZY</a>
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

问题是，当我单击操作列中的按钮时，uiSref覆盖下拉列表的默认操作并将我带到编辑页面。现在你可能会问自己“这很简单，为什么你不能停止事件的传播!？”...行不通。当我将其添加到操作列时:

<td class="actions-column" ng-click="$event.stopPropagation()">

它会终止下拉菜单的功能，并且不会显示任何内容。现在我有一个解决方法，我定义了 ngClick关于<tr>然后根据单击的元素破译状态应该去哪里的元素，如下所示:

<tr ng-repeat="resource in resources" ng-click="goToEdit(resource, $event)">

JS 看起来像这样:

scope.goToEdit = function(resource, event) {
  // if the event.target has parent '.actions-column' or is that column, do nothing else
  // invoke $state.go('edit', {id: resource.id})
}

但我讨厌它，而且我有很多这样的 ListView 。我所寻找的只是一个优雅且便携的解决方案，希望能够通过像 $event.stopPropagation() 这样的 UI Router 本地工作。 (尽管我已经浏览了 UI Router 源代码，但似乎找不到可行的替代方案)。基本上我想要鱼与熊掌兼得。不管怎样，看看 SO 社区能提出什么，或者我所要求的目前是否不可能，将会很有趣。谢谢!

Answer 1

我明白了!进一步查看 UI Router 源代码时，发现如果 target 属性填充在 uiSref 所在的元素上，则单击事件将被忽略。这可能不是世界上最美丽的事情，但它肯定比我以前做的事情容易。

注意:只有当您使用整个 jQuery 库而不是 jQLite 时，这才有效

所以我写了这个指令:

app.directive('uiSrefIgnore', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      elem.on('click', function(e) {
        // Find the ui sref parent
        var uiSref = elem.parents('[ui-sref]').first();
        // Set the target attribute so that the click event is ignored
        uiSref.attr({
          target: 'true'
        });
        // Function to remove the target attribute pushed to the bottom
        // of the event loop. This allows for a digest cycle to be run
        // and the uiSref element will be evaluated while the attribute
        // is populated
        setTimeout(function() {
          uiSref.attr({
            target: null
          });
        }, 0);
      });
    }
  };
});

这样，每当我想忽略 uiSref 指令的 javascript 事件时，我可以将其添加到 html 中:

<tr ui-sref="edit">
  <!-- any other elements -->
  <td ui-sref-ignore>The element I care about</td>
</tr>

轰!让我知道你们对此有何看法。