AngularJS directive passing dynamic ui-sref - angularjs

Question

I'm using the old AngularJS 1.5.11 in a large project and I'm trying to clean up my templates using directives.
I have an edit button directive in which I would like to pass through the ui-sref but when I do I get the error
Error: [$parse:syntax] Syntax Error: Token '}' not a primary expression at column 6 of the expression [{id: }] starting at [}].
Here is my directive
editButton = ->
return {
restrict: 'EA',
scope: {
sref: "#"
},
template: '
sref = {{sref}}
<button id="edit-btn"
class="mds__button -blue"
ui-sref={{sref}}>
<i class="fa fa-edit"></i> Edit
</button>
'
}
angular
.module('myApp')
.directive('editButton', editButton)
And here is how I call it
<edit-button sref="job_edit({id: {{job.id}}})" />
In my template I display the sref and it's correctly printed out but the button doesn't like the ui-sref.
Update
I got it working but it would be nice to refactor this so I pass the job_edit({id: job.id}) attribute and it works.
Directive;
editButton = ->
return {
restrict: 'EA',
scope: {
model: "#"
item: "="
},
template: '
<button id="edit-btn"
class="mds__button -blue"
ui-sref="{{model}}_edit({id: item.id})">
<i class="fa fa-edit"></i> Edit
</button>
'
}
angular
.module('myApp')
.directive('editButton', editButton)
Calling it in my templates;
<edit-button model="job" item="job" />

Answer 1

You can't make that sref = {{sref}} inside an Angularjs template.
When you declare sref on the scope object of the directive that means that your directive gets an isolated scope with sref property on it, with the value that was passed to the directive as an attribute.
This declaration has few possible values, such as, #, =, &.
# is used for an interpolation value, that means that whenever you pass a value to the attribute, you need pass some interpolation
<edit-button sref="{{somethingAvailableOnParentScope}}" />
= 2 way data binding, you need to pass some expression
<edit-button sref="somethingAvailableOnParentScope" />
& bind a function, used to pass a "pointer" to a function. (not relevant for our case)
To sum up, we want to pass the value of job_edit invokation to our directive, therefore we need to use =.
editButton = () => ({
restrict: 'EA',
scope: {
sref: "="
},
template: '
<button id="edit-btn"
class="mds__button -blue"
ui-sref="sref">
<i class="fa fa-edit"></i> Edit
</button>
'
});
angular
.module('myApp')
.directive('editButton', editButton)
And the usage will be something like that:
<edit-button sref="job_edit({id: job.id})" />