javascript - AngularJS - ngRoute - View 加载完成后的回调

Question

我尝试用 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"
});
});

现在打开该对话框时，会出现提醒(调试目的)，但变量不会更改。就在我单击超链接时，警告出现并且变量发生变化，然后动画开始..

我做错了什么？

Answer 1

好的，我是这样理解的:

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