css - Binding style values inside directive template -

i have directive :

app.directive('messagechild', function($timeout) {     return {         restrict: 'e',         scope: {             pos: '=?',             msg: '='         },         link: function(scope, element, attr) {             scope.msg = attr.msg;             scope.stylevar = "100"  //i want insert variable         },         template: '<style> div {position: absolute; top: **<scope variable or binding here>** }</style>' + '<div>{{msg}}</div>'  }) 

this example show trying do. styles substantially more complicated , involve animations. need perform operations , pass value styles. how can inject variable @ location within directive? angular doesn't me putting bindings inside styles.

you try constructing object within link function, can passed ngstyle directive.

app.directive('messagechild', function($timeout) {     return {         restrict: 'e',         scope: {             pos: '=?',             msg: '='         },         link: function(scope, element, attr) {             scope.msg = attr.msg;             scope.stylevar = {               'color': 'blue',               'position': 'absolute',               'top': '100'             };         },         template: '<div ng-style="stylevar">{{msg}}</div>'     };  }); 

example plunker:

http://plnkr.co/edit/b1uo8n

edit

you can accomplish same using <style> tag if wish:

app.directive('messagechild', function($timeout) {     return {         restrict: 'e',         scope: {             pos: '=?',             msg: '='         },         link: function(scope, element, attr) {             scope.msg = attr.msg;             scope.stylevar = 'blue';         },         template: '<style> div {position: absolute; top: 100; color: {{stylevar}}}</style><div>{{msg}}</div>'     };  }); 

example plunker:

http://plnkr.co/edit/8nxkfs?p=preview