Compatibility with ui-router v1.0+

[charlie-s]

There are a few tweaks that were needed to make this compatible with ui-router version 1.0+.

The $transitions module is now used to monitor state changes, and some of the state properties that were being referenced didn't seem to match the current syntax. I've forked and made the changes at https://github.com/charlie-s/angular-ui-router-title/blob/master/src/angular-ui-router-title.js. If I introduced any unneeded complexity or anything just let me know.

[charlie-s]

I realized that a $title function that had dependencies wasn't being resolved properly via the angular.isFunction(...) logic, and that we need to use Transition.getResolveValue() in 1.0. I still don't know how to get resolved values for parent states and have opened up https://github.com/angular-ui/ui-router/issues/2946 to try and get that working.

[charlie-s]

Okay, latest push works with 1.0: https://github.com/charlie-s/angular-ui-router-title/commit/ed7d5b8fb8725f79fa7543e7b0e7a10f5c702857

[jwanglof]

@charlie-s Will du make a PR with the fix?

[charlie-s]

The current CDN version of ui-router 1.x doesn't have the Transition.getResolvable() method, so this is too early to merge in I think.

I have a pull request at ui-router to fix something related to this. I'll monitor that and wait until there's a stable ui-router release, then get this working and the tests passing, then issue a PR.

I do have 1 question regarding the tests – why should the 2nd and 3rd tests fail if $title is a function or a value?

[stephanbarrett]

+1

[approxit]

@charlie-s Any updates with this issue?

[charlie-s]

I've just been using the patched version as above. I'll see if ui-router now works with this as soon as I can and post back here.

[stephanbarrett]

@charlie-s The link to your patch above 404s. If you have a moment to fix the link, I'd be interested in seeing how you patched it to make it work.

[tsauerwein]

The code in this fork (https://github.com/ChurchDesk/angular-ui-router-title/blob/master/angular-ui-router-title.js) works with ui-router 1.0.0-rc.1.

[fabn]

Confirming that @tsauerwein is working. It would be nice to have that code merged in some way.

[aprudnikoff]

FYI, angular ui router 1.0 has been almost released hours ago https://github.com/angular-ui/ui-router/tags

[jwanglof]

@nonplus Any plans to fix angular-ui-router-title so that it works with [email protected]?

[nickminutello]

Need a $breadcrumbs fix too...

[nickminutello]

Any updates ?

[qiangbro]

I updated ui-router from 0.3.1 to 1.0.5, then I found that ui-router-title (currently v0.1.1) didn't work. Any updates or fixs available ?

[Slessi]

Its tailored to my own personal requirement but this fixes $breadcrumbs and $title for me

(function () {
    'use strict';

    angular.module('MyApp')
        .provider('$title', $titleProvider)
        .run(run);

    function $titleProvider() {
        return {
            $get
        };

        function $get() {
            return {
                breadCrumbs
            };

            function breadCrumbs(trans) {
                var $breadcrumbs = [];
                var state = trans.targetState().$state();

                while (state && state.navigable) {
                    var hasTitle = state.resolvables.some(s => s.token === '$title');

                    $breadcrumbs.unshift({
                        title: hasTitle ? trans.injector(state).get('$title') : state.name,
                        state: state.name,
                        stateParams: state.params
                    });

                    state = state.parent;
                }

                return $breadcrumbs;
            }
        }
    }

    run.$inject = ['$rootScope', '$transitions', '$title']

    function run($rootScope, $transitions, $title) {
        $transitions.onSuccess({}, function (trans) {
            $rootScope.$title = trans.injector().get('$title');
            document.title = $rootScope.$title ? `MyApp - ${$rootScope.$title}` : 'MyApp';
            $rootScope.$breadcrumbs = $title.breadCrumbs(trans);
        });
    }
})();

[alexagranov]

As per @Slessi, the key to get this working is injecting the updated $transitions provider. Here's an updated version that preserves the ability to leverage the documentTitleCallback:

(function(angular) {

    "use strict";
    var documentTitleCallback = undefined;
    var defaultDocumentTitle = document.title;
    angular.module("custom.ui.router.title", ["ui.router"])
           .provider("$title", function $titleProvider() {
               return {
                   documentTitle: function (cb) {
                       documentTitleCallback = cb;
                   },
                   $get: ["$state", function ($state) {
                       return {
                           title: function () { return getTitleValue($state.$current.locals.globals["$title"]); },
                           breadCrumbs: function (trans) {
                               var $breadcrumbs = [];
                               var state = trans.targetState().$state();

                               while (state && state.navigable) {
                                   var hasTitle = state.resolvables.some(s => s.token === '$title');

                                   $breadcrumbs.unshift({
                                       title: hasTitle ? trans.injector(state).get('$title') : state.name,
                                       state: state.name,
                                       stateParams: state.params
                                   });

                                   state = state.parent;
                               }
                               return $breadcrumbs;
                           }
                       };
                   }]
               };
           })
           .run(["$rootScope", "$timeout", "$title", "$injector", "$transitions", function ($rootScope, $timeout, $title, $injector, $transitions) {
               $transitions.onSuccess({}, function (trans) {
                   var title = trans.injector().get('$title');
                   $timeout(function() {
                       $rootScope.$title = title;
                       var documentTitle = documentTitleCallback ? $injector.invoke(documentTitleCallback) : title || defaultDocumentTitle;
                       document.title = documentTitle;
                   });
                   $rootScope.$breadcrumbs = $title.breadCrumbs(trans);
               });
           }]);
    function getTitleValue(title) {
        return angular.isFunction(title) ? title() : title;
    }
})(window.angular);