AngularJS ui-sref外部(绝对)链接

时间:2015-06-05 13:56:44

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

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

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

内部网址工作正常,但如果我想这样做会怎样?

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

这显然不起作用。如果没有两个独立的数组,在我的模板中有一些外部(绝对)链接的最佳方法是什么?

3 个答案:

答案 0 :(得分:1)

Ui-sref指的是一个州。你的观点是国家。外部网站不是州,只是一些外部链接。

我建议您重构菜单生成器以处理不同类型的菜单项:

  • 基于状态的链接(通过ui-sref生成的链接)
  • 标准链接(通过href生成的链接,用于外部链接,电子邮件等)

然后,您只需使用menuItems不同的对象填充array

答案 1 :(得分: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中我在<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>

答案 2 :(得分:-1)

我通过为外部链接和ng-click功能创建第二个数组来修复此问题。

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