Angularjs CSS转换不显示在指令中

我在玩转换和指令。我已经创建了一个Card指令，当点击时，它应该在全屏上显示自己的克隆。如果我没有在超时时间内应用css类，转换就不会发生。应该这样做吗

<div ng-app='trans'>
    <div data-card class='card'>timeout</div>
    <div data-card='notimeout' class='card'>not timeout</div>
</div>

这是我的指令的简化版本

var app = angular.module('trans', []);

app.directive('card', ['$document', '$timeout', function ($document, $timeout) {
    return {
        restrict: 'A',
        link: link,
        scope: {}
    };

    function link(scope, element, attrs) {

        var clone;
        element.on('click', function () {

            if (clone) {
                clone.off().remove();
            }

            clone = element.clone();
            var spec = getCardSpecifications();

            clone.css({
                'margin': '0',
                    'top': spec.top + 'px',
                    'left': spec.left + 'px',
                    'position': 'absolute'
            });
            $document.find('body').append(clone);

            clone.addClass('goto');

            if (attrs.card == 'notimeout') {

                clone.addClass('fullscreen');
            } else {

                $timeout(function () {
                    clone.addClass('fullscreen');
                }, 0);
            }

        });

        function getCardSpecifications() {
            var spec = {};
            spec.top = element.prop('offsetTop');
            spec.left = element.prop('offsetLeft');
            spec.height = element[0].offsetHeight;
            spec.width = element[0].offsetWidth;
            return spec;
        }

    }
}]);

---

我已经创建了这个来演示问题。

当使用css等方法通过指令更改DOM时，您必须将这些更改通知摘要循环

---

为了实现这一点，您应该在if语句中添加css类之后添加作用域。$apply（）。$timeout之所以对您有效，是因为它在超时执行后调用$apply

问题与Angular本身无关，而是创建一个新的DOM节点并在其上设置一个类。例如，描述了这样一个问题，它使用与第一个示例中的解决方案相同的解决方案

免责声明：真正有角度的做法是。下面的解决方案几乎与OP的解决方案相同，如果您不想依赖该模块，您只想使用该解决方案，但它只有~11kb未压缩，4kb压缩。明智地选择

对我来说，等待DOM节点准备就绪也是有效的：

clone.ready(function() {
    clone.addClass('fullscreen');
});

这几乎等同于使用0毫秒超时，但这是一个错误。更具描述性和b。在所有情况下都有效，而在Firefox中超时解决方案有时显然会失败（请参阅）

文章中给出的第二种解决方案读起来也有点黑客味（实际上是观点问题），您必须检索实际的DOM元素，而不是它周围的jqLite包装器才能使用它

---

---

为什么会发生这种情况，即使您是在“添加后”添加类，我也无法很快找到原因。可能

appendChild

（它最有可能使用internall）是异步的（即将DOM操作任务推送到事件队列上）？如果你真的对这个问题的原因感兴趣的话，更多的谷歌搜索可能会有用。

你可能应该使用animate来制作动画

 $animate.addClass(clone, 'fullscreen'

我在尝试获取对小提琴中动画的依赖性时遇到了问题，所以

---

我做了一个

我把它添加到了一个。似乎不起作用。有什么想法吗？是的，只是看到这并不能解决问题。我建议您看看使用$animate进行转换的角度方法：谢谢。我将阅读$animate。但我喜欢这个元素。答案是，在不需要更高级的东西的情况下。所以我不依赖$animateWhat您说的是真的，但是用CSS设置类的动画与angular无关。Angularjs不需要被“告知”。是的，很抱歉造成混乱。谢谢，它可以工作，但我喜欢元素。准备得更好。没有对$animate的依赖性。对不起，那是我，这只是误导，“ready”可能会解决问题，但这只是因为超时的原因，而ngAnimate是专门为解决类似问题而创建的。在这个简单的用例中，element.ready不会更好，因为我不依赖$animate$animate需要在内部执行类似的操作，对吗？现在我不需要整个$animate包。但如果东西变得更高级，我会记得使用$animate。我还将阅读$animate。这实际上是真的@Dylan，我为ngAnimate添加了一个免责声明。我想如果你通过了，我只是觉得它与$timeout没有什么不同。ngAnimate还允许您执行反向操作，16k依赖项并不是不使用某些东西的好理由。它是一种更具描述性的方式（等待DOM节点准备就绪，而不是仅仅推到队列上），显然，在Firefox中仅使用超时有时无法工作（请参阅我的链接文章）。我还附上了关于图书馆规模的说明。

 $animate.addClass(clone, 'fullscreen'