AngularJS

Question

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

因为我在图像上附加了 class，所以它们不在视口内。在删除 class 的同时，动画进入视口。一切顺利等等。

但是：如何让 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"
});
});

现在在打开该对话框时，会出现警报（调试目的），但变量没有改变。就在我单击超链接时，警告出现并且变量发生变化，然后动画开始..

我做错了什么？

Answer 1

好的，我是这样得到的：

var loadingController = ["$scope", function ($scope) {
$scope.opened = false;

setTimeout(
    function () {
        $scope.$apply(function () {
            $scope.opened = true;
        });
    },
    100
);
}];

感谢post：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

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

AngularJS - ngRoute - Callback after view-load finished

javascript

css

animation

callback