AngularJS ui-sref external (absolute) link

Question

I wrote a little angular app. I've got an array of menu items which I print in my template:

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

And in my app.js I declared my states using ui-router like:

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

Internal URLs work just fine, but what if I want to do this?

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

This obviously doesn't work. What would be the best approach to have some external (absolute) links in my template without having two separate arrays?

Possible duplicate of [How would I have ui-router go to an external link, such as google.com?](http://stackoverflow.com/questions/30220947/how-would-i-have-ui-router-go-to-an-external-link-such-as-google-com) — bjunix, Dec 08 '16 at 14:58

score 1 · Answer 1 · answered Jun 05 '15 at 14:20

Ui-sref refers to a state. Your views are states. Externals sites aren't states, it's just some outside links.

I suggest you to refactor your menu generator to handle different type of menu entries :

state based link (link generated through ui-sref)
standard link (link generated through href, for external links, emails, etc)

Then you just have to populate menuItems with an array of different objects

score 1 · Answer 2 · answered Jul 06 '17 at 12:26

I fixed this in my application using ng-if.

Example menu items:

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

Then in the HTML I set the ng-repeat on the <li> but include an <a> for href and one for sref, each with an 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>

score -1 · Answer 3 · answered Jun 05 '15 at 18:35

-1

I fixed this by creating a second array for the external links and an ng-click function.

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

answered Jun 05 '15 at 18:35

Bob Wassermann

349
2
7
19

AngularJS ui-sref external (absolute) link

3 Answers3