Angular UI Router - breaks without href attribute

Question

I'm trying to get angular UI router to work. It was all fine in a standard web project, until I imported into a .net project and everything seemed to break. Namely:

<a ui-sref="someUrl">Click here</a>

does not work, when it did in the previous project. The interesting catch is, if I add an href attribute with a value (can't be an empty string), the click works. This is annoying because my two environments with the same code are acting differently.

Does anyone know why the ui-router would break without an explicit href attribute set on the tag? The git docs state expressly with a code example that the anchor tag only needs the ui-sref attribute, because it will write the href tag on its own when applicable.

I'm using angular 1.3.2 and angular-ui-router.0.2.11.

Code:

<h2>Home Page</h2>

<a href="#" ui-sref="someState">Click for profile</a>
<div ui-view="someStateContainer"></div>

That is literally all of the base html inside the body.

main.js:

/**
 * Primary application definition
 */
var App = App || angular.module("App", [
    "ui.router"
]);


App.config(["$stateProvider", "$urlRouterProvider",
    function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state("someState", {
                views: {
                    "someStateContainer": {
                        templateUrl: "states/testState"
                    }
                }
            })
}]);

when you say this link doesn't work, what is it going to when you click it? — Claies
Sorry - should have clarified. "Nothing" happens - e.g. you click, and there is no reaction whatsoever, as if this were a paragraph or a span. There's not even a request made in fiddler. I'll update OP with some code, since that's helpful.... — dudewad
is your code in a .html page or in a razor .cshtml? and what does the link actually look like in the view source rendered in the browser? — Claies
.cshtml. The link looks like so: <a href="#" ui-sref="someState">Click for profile</a> — dudewad
it looks like that when you add the href or when you leave it out? — Claies

codener codener · Accepted Answer · 2017-11-09T16:20:46

An <a> tag MUST have an href attribute to be considered a link. UiRouter's ui-sref is just a way to instruct uiRouter on how to derive the proper href, which it will then set on the element.

I've noticed that under certain circumstances, uiRouter does not set an href. In my case, there was a state defined with url: "/dashboard". However, ui-sref="/dashboard" would not generate an href attribute (not even an error). I had to set ui-sref="dashboard" so uiRouter would generate href="#/dashboard". Maybe there are more situations in which uiRouter fails without error.

HTH

Angular UI Router - breaks without href attribute

1 Answers