我想在 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
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>
更新:
如果您希望 nb_msg
在稍后更改或异步初始化,您应该使用链接函数和 $watch
对其进行处理:
app.directive('myCssDiv', function () {
function buildAnimationCss(nb_msg) {...}
return {
restrict: 'E',
scope: {
message: '='
},
link: function myCssDivPostLink(scope, elem, attrs) {
scope.$watch('message', function (newValue) {
var nb_msg = parseInt(newValue); // unless it is already an integer...
if (!isNaN(nb_msg)) {
elem.html(buildAnimationCss(nb_msg));
}
});
}
}
});
然后像这样使用它:
<my-css-div message="nb_msg"></my-css-div>
关于javascript - Angularjs 在指令中创建@keyframes 动画 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24349843/