Link to a child state with a param using ui-sref

States

.state('event.detail', {
    url: '/:id',
    views: {
        'event-detail': {
            controller: EventDetail,
            templateUrl: ...
        }
    }
})
.state('event.detail.info', {
    url: '/info',
    views: {
        'event-info': {
            templateUrl: ...
        }
    }
})
.state('event.detail.map', {
    url: '/map',
    views: {
        'event-map': {
            templateUrl: ...
        }
    }
})

ui-sref

<a ui-sref="event.detail({id: event.id}).map">Map</a>

This gives me an Invalid state ref error.

You are almost there... just first is the state name, then is the parameters object passed

// instead of this
<a ui-sref="event.detail({id: event.id}).map">Map</a>
// create this
<a ui-sref="event.detail.map({id: event.id})">Map</a>

There is somehow similar Q & A, where I created this plunker, which should show that all in action (even with parent having params and child has its own)