Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

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

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

Comments

@DinisCruz
Copy link

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
Copy link

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
…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
…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
…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 added a commit that referenced this issue Feb 25, 2016
…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 subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants