I attempted to create a directive that would swap out a CSS link with an inline style definition.
Check out the functional version here.
Now, I am hoping to achieve the same functionality using interpolation, so that I don't have to manually set the innerHtml of the style element. However, it seems like that is not possible. While I can bind the CSS to the scope, Angular doesn't seem to interpolate the code.
Here is the version causing issues:
.directive('link', function(CssSvc) {
return {
restrict: 'E',
replace: true,
scope: {},
template: '<style type="text/css">{{css}}</style>',
link: function(scope, elem, attr) {
scope.$watch(function() { return CssSvc.css }, function() {
scope.css = CssSvc.css;
})
}
}
})
Could someone clarify why this approach won't work, and suggest if there is a way to enable Angular to perform the interpolation?