Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

using ng-view inside another directive breaks refresh and back button #6812

Closed
DinisCruz opened this issue Mar 23, 2014 · 1 comment

Comments

Projects
None yet
4 participants
@DinisCruz
Copy link

commented Mar 23, 2014

I hit an interesting problem yesterday with AngularJS views. They (the views) where working when clicking on a link, but not working when accessed directly, or when the back button was used

After quite a bit of debugging, I was able to track the problem to the fact that if I placed the ng-view directive inside another directive, the refresh and back button would break (although it would work ok for links and direct browser url manipulation).

Here is a blog post I just published with more details/screenshots about this issue: http://blog.diniscruz.com/2014/03/problem-with-angularjs-ng-view-it.html.

For reference here is the C# UnitTest that I wrote to replicate the issue:

    [Test]
    public void Page_Tbot_View_Bug()
    {                             
        var urlTemplate  = "{0}/tbot_v2/{1}";
        var expectedHtml = "This is a test";

        Action<string,bool> runTest = 
                (pageUrl, hasExpectedHtml) =>
                    {
                        var url         = urlTemplate.format(TargetServer, pageUrl);                            
                        ie.open(url);                                                        
                        "Current Url: {0}".info(ie.url());
                        "Current HTML {0}".info(ie.html()); 
                        Assert.AreEqual(hasExpectedHtml, html().contains(expectedHtml));                            
                    };


        runTest("default.htm#test" , false);        // default html has the ng-view inside a directive       
        runTest("users.htm#test"   , true);         // default html has the ng-view on this page            
    }        

Note: I looked at the other route and ng-view issues (like #2100 and #3825) but they don't seem to cover this scenario

@lefos987 lefos987 added this to the Backlog milestone Mar 23, 2014

@elussich

This comment has been minimized.

Copy link

commented Jun 11, 2014

The following issue could throw some light on yours:
#1213

@btford btford removed the gh: issue label Aug 20, 2014

gkalpak added a commit to gkalpak/angular.js that referenced this issue Feb 19, 2016

fix(ngRoute): allow `ngView` to be included in an asynchronously load…
…ed template

During it's linking phase, `ngView` relies on the info provided in `$route.current` for
instantiating the initial view. `$route.current` is set in the callback of a listener to
`$locationChangeSuccess`, which is registered during the instantiation of the `$route` service.

Thus, it is crucial that the `$route` service is instantiated before the initial
`$locationChangeSuccess` is fired. Since `ngView` declares `$route` as a dependency, the service is
instantiated in time if `ngView` is present during the initial load of the page.

Yet, in cases where `ngView` is included in a template that is loaded asynchronously (e.g. in
another directive's template), the directive factory might not be called soon enough for `$route`
to be instantiated before the initial `$locationChangeSuccess` event is fired.

This commit fixes it, by always instantiating `$route` up front, during the initialization phase.

Fixes angular#1213
Fixes angular#6812

gkalpak added a commit to gkalpak/angular.js that referenced this issue Feb 19, 2016

fix(ngRoute): allow `ngView` to be included in an asynchronously load…
…ed template

During it's linking phase, `ngView` relies on the info provided in `$route.current` for
instantiating the initial view. `$route.current` is set in the callback of a listener to
`$locationChangeSuccess`, which is registered during the instantiation of the `$route` service.

Thus, it is crucial that the `$route` service is instantiated before the initial
`$locationChangeSuccess` is fired. Since `ngView` declares `$route` as a dependency, the service is
instantiated in time if `ngView` is present during the initial load of the page.

Yet, in cases where `ngView` is included in a template that is loaded asynchronously (e.g. in
another directive's template), the directive factory might not be called soon enough for `$route`
to be instantiated before the initial `$locationChangeSuccess` event is fired.

This commit fixes it, by always instantiating `$route` up front, during the initialization phase.

Fixes angular#1213
Fixes angular#6812

gkalpak added a commit that referenced this issue Feb 25, 2016

fix(ngRoute): allow `ngView` to be included in an asynchronously load…
…ed template

During it's linking phase, `ngView` relies on the info provided in `$route.current` for
instantiating the initial view. `$route.current` is set in the callback of a listener to
`$locationChangeSuccess`, which is registered during the instantiation of the `$route` service.

Thus, it is crucial that the `$route` service is instantiated before the initial
`$locationChangeSuccess` is fired. Since `ngView` declares `$route` as a dependency, the service is
instantiated in time if `ngView` is present during the initial load of the page.

Yet, in cases where `ngView` is included in a template that is loaded asynchronously (e.g. in
another directive's template), the directive factory might not be called soon enough for `$route`
to be instantiated before the initial `$locationChangeSuccess` event is fired.

This commit fixes it, by always instantiating `$route` up front, during the initialization phase.

Fixes #1213
Fixes #6812

Closes #14088

@gkalpak gkalpak closed this in 5e37b2a Feb 25, 2016

gkalpak added a commit that referenced this issue Feb 25, 2016

fix(ngRoute): allow `ngView` to be included in an asynchronously load…
…ed template

During it's linking phase, `ngView` relies on the info provided in `$route.current` for
instantiating the initial view. `$route.current` is set in the callback of a listener to
`$locationChangeSuccess`, which is registered during the instantiation of the `$route` service.

Thus, it is crucial that the `$route` service is instantiated before the initial
`$locationChangeSuccess` is fired. Since `ngView` declares `$route` as a dependency, the service is
instantiated in time if `ngView` is present during the initial load of the page.

Yet, in cases where `ngView` is included in a template that is loaded asynchronously (e.g. in
another directive's template), the directive factory might not be called soon enough for `$route`
to be instantiated before the initial `$locationChangeSuccess` event is fired.

This commit fixes it, by always instantiating `$route` up front, during the initialization phase.

Fixes #1213
Fixes #6812

Closes #14088
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.