angularjs expression in html <object> tag
As of AngularJS 1.1.4, you can use the ng-attr-
prefix for the data
attribute:
<object ng-attr-data="{{doc_details.file_url}}" type="application/pdf"></object>
See the ngAttr
for binding to arbitrary attributes section on AngularJS: Interpolation and data-binding.
The problem here is that the browser is seeing
<object data="{{doc_details.file_url}}" type="application/pdf"></object>
in the DOM before Angular compiles it, and obviously {{doc_details.file_url}}
isn't a valid URL.
Directives can be your friend here.
Say we want to write:
<pdf src='doc_details.file_url'></pdf>
We can create a directive:
app.directive('pdf', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
var url = scope.$eval(attrs.src);
element.replaceWith('<object type="application/pdf" data="' + url + '"></object>');
}
};
});
This will defer the creation of the object
element until we actually have the URL available to us from the scope (assuming it's already there - otherwise you'd want to $watch
the src
attribute on the scope until it became available).
Here this is in a fiddle.