Hmmmmm

can-i-do-this-better.js

angular.module('my.Module').directive('dateControl', dateControl);

function dateControl() {
    return {
        bindToController: true,
        controller: Controller,
        controllerAs: 'vm',
        scope: {
            isDataReady: '=',
            dateMilliseconds: '='
        },
        template: '<input type="date" ng-model="vm.dateObj">'
    };
}

/* @ngInject */
function Controller($scope, $log) {
    const vm = this;

    onDataReady(activate);

    function onDataReady(callback) {
        const unbind = $scope.$watch('vm.isDataReady', isDataReady => {
            if (!isDataReady) { return; }
            callback();
            unbind();
        });
    }

    function activate() {
        vm.dateObj = new Date(vm.dateMilliseconds);
        syncDateMillisecondsWithProxy();
    }

    function syncDateMillisecondsWithProxy() {
        $scope.$watch('vm.dateObj', (newDate, oldDate) => {
            if (newDate === oldDate) { return; }
            vm.dateMilliseconds = newDate.getTime();
        });
    }
}

I have a few different places like this, where I want to bind a control to data, but the data that the control consumes needs to be mapped into a different type.

In this example, I have a millisecond (int) value, but my control needs to consume a Date.

I can genericize this this code into a services or something, but wanted to first explore if there's a better way.

Adam posted this, which is an interesting approach:

http://jsfiddle.net/asicfr/Mp7kT/

It essentially requires the ngModel controller, and uses ngModel.$parsers and ngModel.$formatters arrays.