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? — bjunix
– bjunix, Commented Dec 8, 2016 at 14:58

Jscti · Accepted Answer · 2015-06-05 14:20:01Z

1

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

answered Jun 5, 2015 at 14:20

Jscti

14.5k5 gold badges66 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sterling Archer · Accepted Answer · 2017-07-06 12:26:55Z

1

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>

answered Jul 6, 2017 at 12:26

Sterling Archer

112 bronze badges

Comments

Bob Wassermann · Accepted Answer · 2015-06-05 18:35:24Z

-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 5, 2015 at 18:35

Bob Wassermann

3792 gold badges9 silver badges19 bronze badges

Collectives™ on Stack Overflow

AngularJS ui-sref external (absolute) link

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related