Nested directives are not rendering

Question

I have a formatting directive using MomentJS that works fine on it's own. It doesn't try to maintain bindings but is only meant to spit out a formatted date. When I nest it inside of another directive, that in turn uses the ng-repeat directive, it doesn't work any more. What needs to change to allow it to render the formated date?

http://jsfiddle.net/P2cu6/3/

angular.module('test').directive('payPeriodDropDown', function () {
        return {
        restrict: 'EA',
        scope: {
            sName: '@',
            sClass: '@'
        },
        link: function ($scope, element, attr) {
            $scope.timePeriods = ranges;
        },
        template: '<select name="{{sName}}" id="{{sName}}" class="{{sClass}}">' +
                '<option ng-repeat="period in timePeriods" value="{{$index}}">' +
                    '<moment-format val="{{period.start}}" format="YYYY" ng-transclude></moment-format> - ' +
                    '<moment-format val="{{period.end}}" format="YYYY" ng-transclude></moment-format>' +
                '</option>' +
            '</select>'
    }
});

Thanks!

Answer 1

I cant solve your problem directly, but if you would use a filter for momentFormat instead of a directive, it would work.

see http://jsfiddle.net/P2cu6/6/

angular.module('test').filter('momentFormat', function () {
    return function(input, format) {
            var regexEpic = /^\d+$/ig;
            var val = (regexEpic.test(input)) ? window.parseInt(input) : input;
            return moment(val).format(format);
        }
    });

regards