我写了一个小角度应用程序。我有一系列菜单项,我在模板中打印:
<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/'
})
这显然不起作用。如果没有两个独立的数组,在我的模板中有一些外部(绝对)链接的最佳方法是什么?
答案 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;
}
};