Using BackButton with $route module

GabrielGil commented 8 years ago

I'm trying to use what has been driving me crazy during the whole night. (From 12am to 7am right now...)

When I load <win-back-button>it gets disabled automatically and although I've seen in some places that is takes window.location.history as reference, doesn't seem to react at anything.

Would it be possible to include an example of this directive? I can't find any useful/updated reference to this.

Thank you so much.

xdvarpunen commented 8 years ago

Tests

Angular-WinJS tests only test that win-back-button created contains class win-back-button. Link to test file: https://github.com/winjs/angular-winjs/blob/master/tests/BackButton.js

Definition files (WinJS)

Link to WinJS BackButton definition file: https://github.com/winjs/winjs/blob/master/src/js/WinJS/Controls/BackButton.js Link to WinJS Navigation definition file: https://github.com/winjs/winjs/blob/master/src/js/WinJS/Navigation.js

Angular-WinJS BackButton directive

exists("BackButton") && module.directive("winBackButton", function () {
        return {
            restrict: "E",
            replace: true,
            template: "<BUTTON></BUTTON>",
            link: function ($scope, elements) {
                var control = new WinJS.UI.BackButton(elements[0]);
            }
        };
    });

It seems there is nothing you can touch in directive. <win-back-button></win-back-button> is used as it is. The controller for it and utilization is done through winControl. Here is link for example of winControl for you: https://github.com/xdvarpunen/ng-winjs-tea/tree/master/WinControl

The Page control template includes a back button that is enabled when you use the WinJS.Navigation functions to navigate. When you use the WinJS.Navigation functions, the app stores navigation history for you. You can use that history to navigate backward by calling WinJS.Navigation.back or to navigate forward by calling WinJS.Navigation.forward. -https://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx

Example code from MSDN about navigation and BackButton:

https://msdn.microsoft.com/en-us/library/windows/apps/jj663504.aspx

If you look at their example, they use WinJS Navigation object for navigation. You could utilize that in your navigation in $route instead of letting <a href="#">link</a> be simply a link to #. In other words:

// Set function to utilize WinJS.Navigation
 linkClickEventHandler: function (eventInfo) {
            eventInfo.preventDefault();
            var link = eventInfo.target;
            WinJS.Navigation.navigate(link.href);
        }

and

// set listener to all links you have to utilize WinJS Navigation
WinJS.Utilities.query("a").listen("click",this.linkClickEventHandler, false);

TL;DR

In the nutshell, you need to control win-back-button from WinJS side, directive is doing what is should in Angular-WinJS, and that is to simply view it. win-back-button depends on WinJS.Navigation. In order to make it work, utilize WinJS.Navigation.

GabrielGil commented 8 years ago

Alright, alright. Thank you for your answer. I ended up passing the url value of the new route on any change of location, so WinJS.Navigation and Angular are on the same "loop". Thank you so much for your answer. I thought this responsibility was to be taken in consideration by this Angular-WinJS module.

winjs / angular-winjs