AngularJS ui-sref 外部（绝对）链接答案

【问题标题】：AngularJS ui-sref external (absolute) linkAngularJS ui-sref 外部（绝对）链接
【发布时间】：2015-08-20 12:20:48
【问题描述】：

我写了一个小角度应用程序。我在模板中打印了一系列菜单项：

<nav id="menu">
  <ul>
    <li ng-repeat="i in menuItems" 
        ui-sref="{{ i | removeSpacesThenLowercase }}"
        ui-sref-active="active">{{ i }}</li>
  </ul>
</nav>

在我的 app.js 中，我使用 ui-router 声明了我的状态，例如：

.state('camera', {
  url: '/selection',
  templateUrl: '/views/selection.html',
  uiShade: 'light back',       
  back: 'intro'
})

内部 URL 可以正常工作，但如果我想这样做呢？

.state('facebook', {
  url: 'https://www.facebook.com/'
})

这显然行不通。在没有两个单独数组的情况下，在我的模板中包含一些外部（绝对）链接的最佳方法是什么？

【问题讨论】：

How would I have ui-router go to an external link, such as google.com?的可能重复

标签： javascript angularjs angular-ui-router ui-sref

【解决方案1】：

Ui-sref 指的是一个状态。你的观点是状态。外部网站不是州，它只是一些外部链接。

我建议你重构你的菜单生成器来处理不同类型的菜单条目：

基于状态的链接（通过ui-sref生成的链接）
标准链接（通过href生成的链接，用于外部链接、电子邮件等）

然后你只需要用不同对象的array 填充menuItems

【讨论】：

【解决方案2】：

我通过为外部链接和 ng-click 函数创建第二个数组来解决此问题。

$scope.elink = function(element) {
  if (confirm("You're leaving the app, are you sure?")) {
    window.location = element;
  }
};

【讨论】：

【解决方案3】：

我使用 ng-if 在我的应用程序中修复了这个问题。

示例菜单项：

     $scope.navItems = [{
        id: 1,
        title: 'Internal Link',
        href: null,
        sref: 'internal-state'
    },
    {
        id: 2,
        title: 'External Link',
        href: 'https:/google.co.uk',
        sref: null
    }];

然后在 HTML 中，我在 <li> 上设置了 ng-repeat，但包括一个用于 href 的 <a> 和一个用于 sref，每个都带有一个 ng-if。

     <li ng-repeat="item in navItems">
         <a ng-if="item.sref" ui-sref="{{item.sref}}">{{ item.title }}</a>
         <a ng-if="item.href" href="{{item.href}}">{{ item.title }}</a>
     </li>

【讨论】：