javascript - Angularjs ccreate @keyframes animation CSS in directive -

javascript - Angularjs ccreate @keyframes animation CSS in directive -

i want create @keyframes animation css in directive function of angularjs. problem can't create before. need variable of scope create keyframes.

app.directive("mycssdiv", function() { var css = "@keyframes myanimation {"; var nb_msg = ??? // here want variable $scope.nb_msg don't know how if(nb_msg == 2) { css += "0%, 100% {left: 0px}"; css += "30%, 60% {left: -100px}"; } else if(nb_msg == 3) { css += "0%, 100% {left: 0px}"; css += "15%, 50% {left: -100px}"; css += "60%, 85% {left: -200px}"; } else if(...) { ... } homecoming { restrict: "e", template: css } });

any suggestions? thanks!

the scope available (among other places) in linking function of directive. in case, although can access current scope, practice isolate directive's scope , pass value parameter.

if want utilize value in template, can access through attribute:

app.directive('mycssdiv', function () { function buildanimationcss(nb_msg) { var css = '@keyframes myanimation {'; switch (nb_msg) { case 2: css += "0%, 100% {left: 0px}"; css += "30%, 60% {left: -100px}"; break; case 3: css += "0%, 100% {left: 0px}"; css += "15%, 50% {left: -100px}"; css += "60%, 85% {left: -200px}"; break; case ...: ... break; } homecoming css; } homecoming { restrict: 'e', template: function (telem, tattrs) { homecoming buildanimationcss(parseint(tattrs.message)); } } });

then utilize this:

<my-css-div message="{{nb_msg}}"></my-css-div>

update:

if expect nb_msg alter or asynchronously initialized @ later point, should utilize linking function , $watch on it:

app.directive('mycssdiv', function () { function buildanimationcss(nb_msg) {...} homecoming { restrict: 'e', scope: { message: '=' }, link: function mycssdivpostlink(scope, elem, attrs) { scope.$watch('message', function (newvalue) { var nb_msg = parseint(newvalue); // unless integer... if (!isnan(nb_msg)) { elem.html(buildanimationcss(nb_msg)); } }); } } });

then utilize this:

<my-css-div message="nb_msg"></my-css-div>

javascript css angularjs angularjs-directive css-animations