Javascript Angularjs ccreate@keyframes动画CSS in指令
我想在Angularjs的指令函数中创建@keyframes动画CSS。问题是我以前无法创建它。我需要一个范围变量来创建这个关键帧Javascript Angularjs ccreate@keyframes动画CSS in指令,javascript,css,angularjs,angularjs-directive,css-animations,Javascript,Css,Angularjs,Angularjs Directive,Css Animations,我想在Angularjs的指令函数中创建@keyframes动画CSS。问题是我以前无法创建它。我需要一个范围变量来创建这个关键帧 app.directive("myCSSDiv", function() { var css = "@keyframes myAnimation {"; var nb_msg = ??? // Here i want to get a variable like $scope.nb_msg but i don't know how to get it
app.directive("myCSSDiv", function() {
var css = "@keyframes myAnimation {";
var nb_msg = ??? // Here i want to get a variable like $scope.nb_msg but i don't know how to get it
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(...) {
...
}
return {
restrict: "E",
template: css
}
});
有什么建议吗?谢谢 该范围可在指令的链接功能中找到(除其他位置外)。在这种情况下,尽管您可以访问当前范围,但最好隔离指令的范围并将值作为参数传递 如果要使用模板中的值,可以通过属性访问该值:
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;
}
return css;
}
return {
restrict: 'E',
template: function (tElem, tAttrs) {
return buildAnimationCss(parseInt(tAttrs.message));
}
}
});
然后像这样使用它:
<my-css-div message="{{nb_msg}}"></my-css-div>
<my-css-div message="nb_msg"></my-css-div>
然后像这样使用它:
<my-css-div message="{{nb_msg}}"></my-css-div>
<my-css-div message="nb_msg"></my-css-div>
非常感谢,只剩下一个问题,即nb_msg是NaN。我认为模板函数在我设置变量“nb_msg”的控制器函数之前工作。我必须在controller函数中设置nb_msg,因为我需要一些参数,如$http,$scope。@布莱克:在这种情况下,您可能应该使用一个link函数(可能是nb_msg
),然后使用element.html(…)
来更改自定义元素的内容。但是如果没有更多的信息,我不能确定它是否会起作用。编辑:看看我最新的答案——也许会有帮助。