ui-router doesn't run the current state if your ui-view is inside an ng-include

[nickretallack]

ng-include a template that has a ui-view in it. When the page loads, ui-router won't run the current state. Navigate to a new url and back and the state will run.

[timkindberg]

Would you mind creating a plunkr that recreates the issue?

[nickretallack]

I would, but I don't know how to do an ng-include in plunker.

On Friday, December 13, 2013, Tim Kindberg wrote:

Would you mind creating a plunkr that recreates the issue?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/679#issuecomment-30557738
.

[nickretallack]

Ok I modified the example plunker to show what I mean.
http://plnkr.co/edit/xnaX6Q?p=preview

I noticed that if there are any ui-sref directives on the main page, the problem doesn't arise.

[nickretallack]

Btw, the reason I'm not using ui-sref is because I need to have a link within a link. That is, an element is clickable and so is its parent element. This unfortunately can't be done with anchor tags. Is there a way to do this with ui-sref?

<div ng-click="go_to_subview()">
<a href="page.html">Title</a>
<p>Info</p>
</div>

It makes more sense for the inner link to be the real link because it opens a different page, and you might want to use control-click on it.

[timkindberg]

Why yes, you can: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-prevent-nested-ui-sref-objects-from-all-firingtriggering. There was an issue opened about this already, but we decided for now to just use the method shown in that link.

Also that plunkr is working for me, am I supposed to see something break?

[nickretallack]

Yes it's broken. It doesn't show an error or anything, but you can discover the oddity by experimenting with it a little. The bug is that ui-view or ui-sref tags in the included template (template.html) do not cause ui-router to start working. See how route1 is not rendered, even though it's supposed to redirect you there and render that immediately? If you add a single one of these tags to the outside template (index.html) it suddenly decides to redirect you and render the ui-view in the included template.

I noticed a new oddity while I was making this plunker. In my initial bug report, I was reloading the page while the url already matched route1 and it wouldn't render the template. By playing with this, I've further discovered that it won't redirect you to route1 unless there are ui-view or ui-sref tags in the main template (index.html).

[nickretallack]

The reason I'm doing a top level include is so my template can escape from the server-side templating engine, which uses the same mustache notation as angular. Unfortunately, it seems I need to put some ui-* directives outside the top level include in order to get ui-router to boot.

[timkindberg]

Hmmm, that is quite interesting. If I add ui-sref to basically anywhere in index.html, then route1 is properly loaded, if I remove it then it breaks again.

[dlukez]

This sounded similar to angular/angular.js#4957

...so I made a small modification to your plunkr whereby a run function block includes the $state service:

http://plnkr.co/edit/a2lD1n?p=preview

Does that work as expected?

[matthewpavkov]

I ran into this same issue, and @dlukez suggestion fixed the issue.

[jgoldberg]

+1 to @dlukez fix

[santyclaz]

Using @dlukez workaround, but would very much prefer the root cause fixed.

[shaneeb]

+1 @dlukez fix but agree that the workaround should not be needed

[jphire]

+1 @dlukez, also preferring the root cause fixed

[ericpeters0n]

+1

Just ran into this (ng-include of template with ui-view being quietly ignored by ui-router)... Will try the workaround, but it seems preferable that what should work with kosher angular should also work with ui-router.

[dlukez]

@ericpeters0n last I checked this is also an issue in angular's ng-view

[exocom]

+1 just ran into this while switching from ng-view to ui-view.
@dlukez workaround worked for us, now I can really start testing out ui-router and see if it will works for us. We haven't had any issues with ng-view inside of ng-include, however, we are manually bootstraping the app.

[dlukez]

I once tried fixing this for ng-view because it used to have the same problem, but I broke other stuff and gave up on it. It sounds like maybe they've fixed it now though, so I might take a look at their new implementation and see if I can figure out a way to port it here

Sent from my iPhone

On 3 Oct 2014, at 7:25 am, exocom [email protected] wrote:

+1 just ran into this while switching from ng-view to ui-view.
@dlukez workaround worked for us, now I can really start testing out ui-router and see if it will works for us. We haven't had any issues with ng-view inside of ng-include, however, we are manually bootstraping the app.

—
Reply to this email directly or view it on GitHub.

[dlukez]

Doesn't look like it's fixed in Angular yet :(

[dallonf]

Also seeing this issue. Also can report the workaround helps.

For anybody who might be using Jade, here's a quick gotcha: div(ui-view) compiles to <div ui-view="ui-view"></div>. What you need is div(ui-view=""). Not sure if that's useful to anybody else in this thread, but it wasted a good half hour of my time thinking the workaround wasn't helping.

[carlos-algms]

+1.
I want to make a dynamic template engine that expose ui-view inside a ng-include.

[ilyagelman]

+1

[nickretallack]

This is still tripping people up a year later?

[ilyagelman]

Well, it only works for me if I inject $state at the run state.

[theghostbel]

.run() hack-fix helped us, but "vanilla-angular" support is really needed, so, +1

[tslater]

+1

[nateabele]

I'll look into this when I have time, but for now, there are plenty of equally-problematic issues that don't have simple workarounds, so I can't logically prioritize this.

If someone else wants to dig into it and report back (or better yet, open a PR), that'd be great.

[uditalias]

+1

[Kaijun]

same here, but i found a solution as @ilyagelman mentioned:

    .run(['$state', function($state){

    }]);

will fix, but donno why...

[BilalBoulifa]

+1

[justechn]

I am having a similar problem, but adding .run does not fix it
http://plnkr.co/edit/Na5zkF?p=preview

The xxx button at the top should open a sidenav, just like the big button in the body, and next to the xxx button should be a title. Neither of those are working because they are included in an ng-include

[ps1dr3x]

Same here, .run solution doesn't work

[stale]

This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues
may be reopened.

Thank you for your contributions.