Question

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

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

但是：在对话打开之后，我如何让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"
});
});

现在打开Dialog，出现了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

AngularJS - ngRoute - 查看加载完成后的回调

1 个答案: