how to pass an object to a directive template in angularjs? - angularjs

Question

I am trying to make a re-usable directive with ui-bootstrap modal.
It's almost working except the options
here is the directive :
directive('update', function() {
return {
restrict: "E",
templateUrl: "tplModal.html",
scope: {
selected:"="
},
link: function(scope, elm, attr){
scope.open = function (obj) {
scope.shouldBeOpen = true;
};
scope.close = function () {
scope.shouldBeOpen = false;
};
scope.opts = {
backdropFade: true,
dialogFade:true
};
}
}
})
and tplModal.html
<button class='btn' ng-click='open(selected)'>Update</button>
<div modal="shouldBeOpen" close="close()" options="opts">
<div class="modal-header">
<h3><i class="lead" icon="{{selected.type}}"></i> {{selected.name}}</h3>
</div>
<div class="modal-body">
<!-- stuffs here -->
</div>
<div class="modal-footer">
<button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
</div>
</div>
despite the scope.opts, there is no fade effect.
here is the whole code :
http://plnkr.co/edit/Ab4BOH?p=preview
what am i doing wrong ?

Answer 1

The problem is that you add opts property to scope in the post-linking function, which will be called after modal directive's linking function, so the modal directive will never get those options.
The solution is to move scope.opts = ... to pre-linking function:
directive('update', function() {
return {
...
compile: function() {
return {
pre: function(scope, elm, attr){
...
scope.opts = {
backdropFade: true,
dialogFade: true
};
}
};
}
}
}
http://plnkr.co/edit/iZaEiM?p=preview