AngularJS ui-sref внешняя (абсолютная) ссылка

Question

Я написал небольшое угловое приложение. У меня есть массив пунктов меню, которые я печатаю в своем шаблоне:

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

Это, очевидно, не работает. Как лучше всего использовать внешние (абсолютные) ссылки в моем шаблоне, не имея двух отдельных массивов?

Answer 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> но включить <a> для href и один для 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>

Answer 2

Ui-sref относится к состоянию. Ваши взгляды являются состояниями. Внешние сайты не являются штатами, это просто внешние ссылки.

Я предлагаю вам провести рефакторинг вашего генератора меню для обработки различных типов пунктов меню:

• ссылка на основе состояния (ссылка создается через ui-sref)
• стандартная ссылка (ссылка создается через href, для внешних ссылок, электронных писем и т. д.)

Тогда вам просто нужно заполнить menuItems с array разных предметов

Answer 3

Я исправил это, создав второй массив для внешних ссылок и функцию ng-click.

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