Angularjs在指令中创建@keyframes动画CSS答案

【问题标题】：Angularjs ccreate @keyframes animation CSS in directiveAngularjs在指令中创建@keyframes动画CSS
【发布时间】：2014-08-12 13:03:27
【问题描述】：

我想在 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
    }
});

有什么建议吗？谢谢！

【问题讨论】：

标签： javascript css angularjs angularjs-directive css-animations

【解决方案1】：

范围在指令的链接函数中可用（在其他地方）。
在这种情况下，虽然您可以访问当前范围，但最好隔离指令的范围并将值作为参数传递。

如果要使用模板中的值，可以通过属性访问：

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>

【讨论】：

非常感谢，只剩下一个问题，nb_msg 是 NaN。我认为模板函数在我设置这个变量“nb_msg”的控制器函数之前工作。我必须在控制器函数中设置 nb_msg，因为我需要一些参数，例如 $http、$scope。
@blck：在这种情况下，您可能应该使用链接功能（也可能使用$watch 而非nb_msg）然后使用element.html(...) 更改自定义元素的内容。但如果没有更多信息，我不能确定它会起作用。编辑：看看我更新的答案 - 也许会有所帮助。