Question

我有2条路线 - “主要”和“结果”。

$stateProvider
        .state('main', {
            url: "/",
            templateUrl: "views/main.html"
        })
        .state('results', {
            url: "/results/:searchQuery",
            templateUrl: "views/results.html"
        })

在这两个路线中，我都为搜索栏添加了相同的指令。在结果路线中，我也有结果指令。

我的应用程序控制器附加到正文标记。

app.controller("AppCtrl", function ($scope)
{
    if (!angular.isDefined($scope.animations))
    {
        $scope.animations = {};
    }
    $scope.animations.isSmall = false;
});

搜索部分有一个发送到结果路线的按钮。

<button class="btn-search" ui-sref="results({searchQuery: searchQuery})"></button>

如果searchQuery不为空，结果控制器会将$ scope.animations.isSmall设置为true，以便动画开始。

app.controller("ResultsCtrl", function ($scope, $stateParams, $interval) {
    if ($stateParams.searchQuery && $stateParams.searchQuery != "") {
            $scope.animations.isSmall = true;
    }
    $scope.$on('$destroy', function () {
            $scope.animations.isSmall = false;
        });
});

我第一次点击按钮，它会将我带到结果路线并触发动画。之后我点击后退并单击按钮，它将我带到没有动画的结果页面。

这是HTML：

<div class="main-cont" ng-class="{'small':animations.isSmall, 'big':!animations.isSmall}">
</div>

和CSS：

section.main .main-cont.small {
    height:200px;
    -webkit-transition: all 150ms ease-out;
    -moz-transition: all 150ms ease-out;
    -o-transition: all 150ms ease-out;
    transition: all 150ms ease-out;
}
section.main .main-cont.big {
    height:500px;
}

所以，一切都是魅力第一次，我确信我正确配置了路由和控制器，$ scope.animations.isSmall正在正确更新。我认为它不起作用，因为动画迭代计数。动画是trigerred时，我单击后退，它会将页面重置为初始视图。触发动画的类没有附加到HTML标记，但是它以某种方式记住由于ng-class已经触发了动画。

希望我能解释一下我的问题。提前谢谢。

单击使用AngularJS和UI路由器

0 个答案: