3

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

<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/'
})

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

4

3 回答 3

1

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

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

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

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

于 2015-06-05T14:20:01.140 回答
1

我使用 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 中我设置了 ng-repeat，<li>但包括一个<a>for href 和一个 for 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>
于 2017-07-06T12:26:55.453 回答
-1

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

$scope.elink = function(element) {
  if (confirm("You're leaving the app, are you sure?")) {
    window.location = element;
  }
};
于 2015-06-05T18:35:24.493 回答