我有以下 AngularJS (v1.1.4) 代码，并且在将 ng-include 添加到 DOM 时尝试淡入（动画）它。我究竟做错了什么？此外，如果有人可以提出一种将添加/设置/删除命令传递给指令而不是观看“动作”属性的更好方法，那将不胜感激。
Plunker 在这里：http ://plnkr.co/edit/rcgpI0n8fGWj6o01Mp3b?p=preview
索引.html
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="styles.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="loadPartial('partial1.html')">Click to load partial 1</button>
<button ng-click="loadPartial('partial2.html')">Click to load partial 2</button>
<button ng-click="loadPartial('partial3.html')">Click to load partial 3</button>
<div views></div>
</body>
</html>
应用程序.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['$scope', 'viewsAPI', function(scope, viewsAPI) {
scope.loadPartial = function (name) {
viewsAPI.addView(name);
};
}]);
app.factory('viewsAPI', function () {
return {
views: [],
action: null,
addView: function (viewName, options) {
var view = { name: viewName, options: options };
this.action = { type: 'add', view: view };
},
setView: function (viewName, options) {
var view = { name: viewName, options: options };
this.action = { type: 'set', view: view };
},
removeView: function () {
this.action = { type: 'remove' };
}
}
});
app.directive('views', ['$compile', function (compile) {
return {
restrict: 'A',
scope: {},
replace: true,
template: '<div class="views"></div>',
controller: ['$scope', 'viewsAPI', function (scope, viewsAPI) {
scope.api = viewsAPI;
scope.$watch('api.action', actionChange, true);
function actionChange (action) {
if (!action) return;
if (action.type == 'add') {
var view = scope.addView(action.view);
scope.api.views.push(view);
}
else if (action.type == 'set') {
scope.setView(action.view);
}
else if (action.type == 'remove') {
scope.removeView();
}
}
}],
link: function (scope, elm) {
scope.addView = function (view) {
var v = compile('<div class="view-wrapper" ng-include="\'' + view.name + '\'" ng-animate="fade"></div>')(scope);
elm.append(v);
return v;
};
scope.setView = function (view) {
};
scope.removeView = function () {
};
}
};
}]);
样式.css
.fade-enter-setup { -webkit-transition: all 3s linear; opacity: 0; }
.fade-enter-setup { opacity: 1; }
部分1.html
<div>Hello I am a partial 1</div>
部分2.html
<div>PARTIAL 2-------------------</div>
部分3.html
<div>
33333333333333333333333333
<br />
this is partial 3
<br />
33333333333333333333333333
</div>