我正在尝试将$animate服务合并到我自己的指令中.我无法进入并离开实际动画.
奇怪的是使用$animate.enter,元素被附加到DOM,并且回调函数触发.但似乎好像ng-animate,ng-enter和ng-enter-active阶级是不会得到补充.该元素只是附加到DOM而没有动画.触发函数触发,但它会立即触发,而不是在应该发生的动画持续时间之后触发.同样的事情发生在leave; 该元素立即从DOM中删除,并且回调立即触发; 没有动画.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>$animate.enter</title>
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.5/angular-animate.js" data-semver="1.2.5"></script>
<script type="text/javascript" charset="utf-8">
var app = angular.module('TestAnimation', []);
app.controller('TestAnimation', function($scope) {
});
app.directive("appendaroo", function($animate, $compile) {
function link(scope, element, attr) {
var isAppended = false;
var parent = element.parent();
var box;
element.on('click', function() {
isAppended = !isAppended;
if (isAppended) {
box = angular.element('<div class="rect"></div>');
$animate.enter(box, parent, element, function() …javascript animation angularjs angularjs-directive ng-animate
我知道这ng-non-bindable允许给定元素及其子元素不被编译为模板.它似乎是根据需要在整个模板中添加的.有没有办法告诉Angular不处理给定的元素,但是"戳洞"并允许处理选定的子元素？例如,我希望能够做到这样的事情:
<div ng-non-bindable>
<div>{{2+2}}</div>
<div ng-bindable>{{2+2}}</div>
</div>
并输出:
{{2 + 2}}
4
据我所知,即使它存在,ng-non-bindable也不会ng-bindable被允许处理.但是,是否存在任何允许像我所表达的模板方法的方法？
为了更加彻底,我的理想解决方案不会处理任何Angular,直到找到它ng-bindable,而不仅仅是花括号表达式.例如:
<div ng-non-bindable>
<div ng-repeat="n in [1,2,3]">{{n+2}}</div>
<div ng-bindable ng-repeat="n in [1,2,3]">{{n+2}}</div>
</div>
会导致:
{{N + 2}}
3
4
五