ui-tr 元素上的 sref 不会在新标签页中打开

Question

我有重复的 table 行，并且在它们上面设置了 ui-sref 属性。单击时，它们会导航到正确的位置。但是，它们不能通过 ⌘ 命令 单击（或在新选项卡中打开）。

我假设这是因为他们设置了一个 href，当元素是锚标记 (<a>) 时，它会被接受，但在其他元素上则不会。

<tr ng-repeat="item in items" ui-sref="view-item({itemId:item.id})">

有什么快速修复的想法吗？

Answer 1

对于代码触发的导航，我们应该使用$state.go(to, params, options)。

$state.go(to, params, options)

Convenience method for transitioning to a new state. $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true }. This allows you to easily use an absolute or relative to path and specify only the parameters you'd like to update (while letting unspecified parameters inherit from the currently active ancestor states).

参数：

to string - Absolute state name or relative state path. Some examples:

$state.go('contact.detail') - will go to the contact.detail state
$state.go('^') - will go to a parent state
$state.go('^.sibling') - will go to a sibling state
$state.go('.child.grandchild') - will go to grandchild state

...

此外，我们可以将其注入 $rootScope，因此 $state （甚至 $state.go()）以后可以随时使用

检查sample app.js代码：

.run(
    [ '$rootScope', '$state', '$stateParams',
    function ($rootScope, $state, $stateParams) {
    // It's very handy to add references to $state and $stateParams to the $rootScope
    // so that you can access them from any scope within your applications.For example,
    // <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
    // to active whenever 'contacts.list' or one of its decendents is active.
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;

}])

Answer 2

我能够通过 ng-click 函数完成我想要的。

app.run(function($rootScope, $state) {

    $rootScope.navigate = function($event, to, params) {

        // If the command key is down, open the URL in a new tab
        if ($event.metaKey) {
            var url = $state.href(to, params, {absolute: true});
            window.open(url,'_blank');

        } else {
            $state.go(to, params);
        }

    };

});

用法

<tr ng-repeat="item in items" ng-click="navigate($event, 'view-item',{itemId:item.id})">

Answer 3

这是我基于 DesignerGuy 解决方案的解决方法。也支持 CTRL + 单击和中心按钮单击的指令。

    function navigate($state) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.on('mousedown', function(event) {
        event.preventDefault();
        var to = attrs.navigate.split("(")[0];
        var str = attrs.navigate.split("(")[1].slice(0, -1);
        var params = JSON.parse(JSON.stringify(eval('(' + str + ')')));
        if (event.metaKey || event.ctrlKey || event.which == 2) {
          var url = $state.href(to, params, {
            absolute: true
          });
          window.open(url, '_blank');

        } else if (event.which == 1) {
          $state.go(to, params);
        }
      });
    }
  }
}

angular
  .module('xxx')
.directive('navigate', navigate)

在视图中只有这个

<tr ng-repeat="item in items" navigate="view-item({itemId: {{item.id}} })">

ui-tr 元素上的 sref 不会在新标签页中打开

ui-sref on tr element won't open in new tab

javascript

angularjs

angular-ui-router

$state.go(to, params, options)