AngularJS - ngRoute - 视图加载完成后的回调

Question

我尝试用AngularJS实现一个动画对话框。所以我的 APP 启动并显示一个对话框（一切都很好），但该对话框包含的图像不在视口中（因为我用我的 CSS 将它们移出视口），然后应该在对话框打开时进行动画处理，并且加载了内容。

为此，我将一个类附加到图像，因此它们不在视口中。删除类时，动画将进入视口。一切都很好，等等。

但是：如何让 AngularJS 让它们动画化，在这个对话框打开后？

这是拨号 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>

下面是对话框控制器：

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"
});
});

现在打开该对话框时，将显示 aleart（调试目的），但变量不会更改。就在我单击超链接时，出现警报，变量更改，然后动画启动。

我做错了什么？

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