Controller is instantiated multiple times when using date parameter

[bogdanalexe90]

Controller is instantiated multiple times when navigating to a state that uses a date parameter. If date parameter is optional controller is instantiated 3 times else twice.

This is my state definition:

.state('stateName', {
                url: '/{id:int}/{childId:int}?{date:date}',
                params: {
                    childId: null,
                    date: null
                },
                resolve: {
                    ...
                },
                controller: '...',
                templateUrl: '...'
            });

P.s: I'm using 0.2.17 version

[eddiemonge]

Can you provide a plnkr example please?

[bogdanalexe90]

Here is a plnkr with angular 1.4.8 and ui-router 0.2.16. You can have a look in console for the output.

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

[christopherthielen]

Thanks. Verified this is a bug. We should only compare year month and day in .equals method.

[bogdanalexe90]

@christopherthielen I don't think that's the reason. I re-implemented the date type using angular.equals and it's working properly.

var date = {
            encode: function (date) {
                if (!this.is(date)) {
                    return;
                }

                return [date.getFullYear(), ('0' + (date.getMonth() + 1)).slice(-2), ('0' + date.getDate()).slice(-2)]
                .join('-');
            },
            decode: function (val) {
                var match;

                if (this.is(val)) {
                    return val;
                }

                match = this.capture.exec(val);

                if (!match) {
                    return;
                }

                return new Date(match[1], match[2] - 1, match[3]);
            },
            is: angular.isDate,
            equals: angular.equals,
            pattern: /[0-9]{4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|[1-2][0-9]|3[0-1])/,
            capture: /([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])/
        };

[christopherthielen]

I added your date impl to the plunk and still see double transitions.

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

[christopherthielen]

This code fixes your plunker:

  app.config(function($stateProvider, $urlMatcherFactoryProvider) {
    let date = $urlMatcherFactoryProvider.type('date')

    date.equals = (l, r) => ['getFullYear', 'getMonth', 'getDate']
        .reduce((memo, fnname) => memo && l[fnname]() === r[fnname](), true);
  });

That equals method belongs here:
https://github.com/angular-ui/ui-router/blob/feature-1.0/src/params/paramTypes.ts#L60