AngularJS: ui-router href rewrite into ui-sref

Question

I have a CMS which forces URLs to pages to be of a certain pattern. We need to conditionally rewrite these link's hrefs.

The CMS will print on the page something like:

<a href="/path/to/the/zoo/gorilla.html">Go</a>

Our router needs to actually point to

#/zoo/gorilla

If we had written this link ourselves, it would look like:

<a ui-sref="zoo('gorilla')>Go</a>

The problem is, we can't always guarantee that the /zoo/gorilla part means we're at zoo('gorilla').

The easiest way would be to parse the CMS url in to the router URL and just do something like:

link.attr("href", "#/zoo/gorilla");

I understand why that is typically against the very idea of ui-router, but I'm hoping to find a way to use it for this one strange case.

score 3 · Accepted Answer · 2015-04-15 17:41:53Z

3

I think this would work, basically a directive to change which URL you are headed towards when you click it.

module.directive('newHref', ['$location',function($location) {
    return function(scope, element, attrs) {
        element.bind('click', newHref);

        function newHref(event) {
            var hrefList = event.target.href.split("/");
            var parent = hrefList[hrefList.length-2];
            var child = hrefList[hrefList.length-1].split(".")[0];

            $location.path("/" + hrefList.slice(0, hrefList.length-2).join("/") + "/" + parent + "/" + child);
        }
    }
}]);

Use it like:

<a href="/path/to/the/zoo/gorilla.html" new-href>Go</a>

edited Apr 15, 2015 at 17:41

answered Apr 15, 2015 at 16:41

user1184321

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

3 Comments

oooyaya Over a year ago

I tried this before asking. Changing the href would point the URL to the proper hash, but the state does not recognize this change.

user1184321 Over a year ago

@oooyaya changed the code to allow the router to see the change

oooyaya Over a year ago

This is what I did. The problem was actually something else - using ui-router named sub-views and having to target them in the views object. That's why the view never changed - I wasn't telling it where to go.

Eryk Napierała · Accepted Answer · 2015-04-16 06:41:05Z

0

It looks like stepping into dangerous zone, but you can create "href" directive which will replace value of href attribute automatically. No extra attributes needed, but it may make your code a bit ambiguous...

module
  .directive('href', function() {
    return function(scope, element, attrs) {
        var ngUrl; // convert CMS url to Angular URL somehow
        if(attrs.href === '/path/to/the/zoo/gorilla.html') {
            ngUrl = '#/zoo/gorilla';
        }

        element[0].href = ngUrl;
    };
});

See here

edited Apr 16, 2015 at 6:41

answered Apr 15, 2015 at 17:08

Eryk Napierała

5064 silver badges7 bronze badges

1 Comment

oooyaya Over a year ago

We did something similar. Maybe its a false symptom. The href does get changed, and the URL changes to what we want when we click it, but the view does not change. Is there some obvious thing that means? It matches a route, and the partial loads, but it never displays.

Collectives™ on Stack Overflow

AngularJS: ui-router href rewrite into ui-sref

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related