我在角度指令中有一个ng-repeat
元素,我想要动画。
现在,我已经将角度动画文件添加到文档& ngAnimate
依赖于我的应用...然而,该元素似乎并没有将ng-*
动画类应用于它。我认为ng-repeat
指令自动识别ngAnimate?我错过了什么?将它放在一个指令中某种程度上迫使我直接使用$ animate?
http://plnkr.co/edit/VOVUtq1BZjop2LBWDk8a?p=preview
的index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-animate@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body>
<alerts></alerts>
</body>
</html>
的script.js
'use strict';
var app = angular.module('app', ['ngAnimate']);
app.run(function(alert) {
alert.success('Hello World!');
});
app.factory('alert', function($timeout) {
var options = {
duration: 3000
};
var counter = 0;
var alerts = [];
function createAlert(type, message) {
var alert = {
type: type, message: message, id: counter++
};
alert.promise = $timeout(function() {
removeAlert(alert.id);
}, options.duration);
alerts.push(alert);
}
function removeAlert(id) {
var alert = find(id);
if (alert && !alert.deleting) {
alert.deleting = true;
var index = alerts.indexOf(alert);
// Cancel the automatic timeout
$timeout.cancel(alerts[index].promise);
// Remove from the alerts array
alerts.splice(index, 1);
}
}
function clear(alert) {
if (alert) {
removeAlert(alert.id);
} else {
for (var i = 0; i < alerts.length; i++) {
removeAlert(alerts[i].id);
}
}
}
function find(id) {
for (var i = 0; i < alerts.length; i++) {
if (alerts[i].id === id) {
return alerts[i];
}
}
}
function success(message) {
createAlert('success', message);
}
return {
alerts: alerts,
success: success,
clear: clear
}
});
app.directive('alerts', function(alert) {
return {
restrict: 'AE',
templateUrl: 'alerts.html',
scope: true,
controller: function($scope) {
$scope.close = function(a) {
alert.clear(a);
};
},
link: function(scope) {
scope.alerts = alert.alerts;
}
}
});
alerts.html文件
<div ng-repeat="alert in alerts" class="alert alert-{{alert.type}}">
<button type="button" class="close" ng-click="close(alert)">×</button>
{{alert.message}}
</div>
的style.css
.ng-leave {
transition: all 1s linear;
}
.ng-leave {
opacity: 1;
}
.ng-leave-active {
opacity: 0;
}
答案 0 :(得分:0)
喔。你没有导入style.css!