我尝试用 AngularJS 实现一个动画对话框。所以我的应用程序启动并显示一个对话框(一切都很好等等),但是该对话框包含不在视口(viewport)中的图像(因为我用我的 CSS 将它们移出视口(viewport))然后应该在对话框打开时进行动画处理并且它是加载的内容。
因为我将一个类附加到图像,所以它们不在视口(viewport)内。在删除类时,动画进入视口(viewport)。一切顺利等等。
但是:在此对话框打开后,我如何让 AngularJS 让它们动画化?
这是 diags HTML,为了调试,我添加了 {{closed}} 和超链接:
<div class="dialog bg-turkey" id="mainpage">
<img src="images/mainpage-1.png" id="mainpage-1" ng-class="{unanimated: closed}">
<img src="images/mainpage-2.png" id="mainpage-2" ng-class="{unanimated: closed}">
<img src="images/mainpage-3.png" id="mainpage-3" ng-class="{unanimated: closed}">
<img src="images/mainpage-4.png" id="mainpage-4" ng-class="{unanimated: closed}">
{{closed}}
<a ng-click='animate()'>open</a>
</div>
这是 Controller 的对话框:
var loadingController = ["$scope", function ($scope) {
$scope.closed = true;
$scope.animate = function () {
alert('los');
$scope.closed = false;
};
$scope.$on('$viewContentLoaded', function () {
setTimeout(
$scope.animate,
100
);
});
}];
这是路线:
app.config(function ($routeProvider, $compileProvider) {
$routeProvider.when("/", {
controller: loadingController,
templateUrl: 'views/loading.html'
}).otherwise({
redirectTo: "views/welcome.html"
});
});
现在打开该对话框时,会出现提醒(调试目的),但变量不会更改。就在我单击超链接时,警告出现并且变量发生变化,然后动画开始..
我做错了什么?
最佳答案
好的,我是这样理解的:
var loadingController = ["$scope", function ($scope) {
$scope.opened = false;
setTimeout(
function () {
$scope.$apply(function () {
$scope.opened = true;
});
},
100
);
}];
感谢这篇文章:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
关于javascript - AngularJS - ngRoute - View 加载完成后的回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29078336/