使用 $compile 在新范围内新创建的指令不会 ng-animate

Question

我有一个switcher 指令，它有一个创建新范围的方法，并在其上使用$compile，将其element 替换为另一个指令lister。

例如，lister 指令包含一个在新作用域上迭代的 ng-repeat。

我尝试在使用ng-enter 和ng-leave 类创建新创建的lister 指令后立即对其进行动画处理，但它没有任何效果，或者看起来如此。

是否可以对使用$scompile 动态创建的指令进行动画处理？如果是这样，我错过了什么？

代码在this plunkr。

Answer 1

您的选择器是问题所在：-

应该是.list-directive li，因为 li 是 ng-repeated。

.list-directive li.ng-enter,
.list-directive li.ng-leave {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.list-directive li.ng-enter {
    margin-left: 200px;
    opacity: 0;
}

.list-directive li.ng-leave,
.list-directive li.ng-enter-active {
    margin-left: 0;
    opacity: 1;
}
.list-directive li.ng-leave-active {
    margin-left: -200px;
    opacity: 0;
}

Plnkr

或者在li's 上应用一个类并对其应用规则。 Plnkr