переплета значения стиля внутри шаблона директивы

Question

У меня есть эта директива:

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 to insert this variable 
     }, 
     template: '<style> div {position: absolute; top: **<scope variable or binding here>** }</style>' + 
'<div>{{msg}}</div>' 

}) 

Это просто пример, чтобы показать, что я пытаюсь сделать. Мои стили на самом деле существенно сложнее и связаны с анимацией. Мне нужно выполнить некоторые операции, а затем передать значение моим стилям. Как я могу вставить переменную в этом месте из моей директивы? Угловой не нравится, что я устанавливаю привязки внутри стилей.

Answer 1

Вы можете попробовать построить объект в пределах функции link, которая затем может быть передана в директиву ngStyle.

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>' 
    }; 

}); 

Пример Plunker:

http://plnkr.co/edit/b1uO8N

EDIT

Вы можете сделать то же самое, используя <style> тег, если вы хотите:

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>' 
    }; 

}); 

Пример Plunker:

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