1

我完全是 AngularJS 的菜鸟，并且已经开始构建我的第一个项目，并且在每一步都遇到了障碍......

我正在尝试构建一些非常简单的东西，这是我想要实现的要点：

  • 我有 5 个页面/视图被拉入并使用基于本文的 JSON 数据创建 - blog.brunoscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app。连接到工厂。获取JSON（）

    function($route, $location, $http, $q) {

var jsonLoaded = {}; 

jsonLoaded.getJSON = function() {

    var deferred = $q.defer();
    $http.get('pages.json').success(function(data) {
        deferred.resolve(data);
    }).error(function() {
        deferred.reject();
    });
    return deferred.promise;
}
return jsonLoaded;

  • 在浏览视图时，我想要一个分层的轮播过渡效果。即，如果您在索引 0 上单击索引 1，将从右到左导航，然后单击索引 0 将然后从左到右导航视图等。这在我的 plunks 中的 animate.js 文件中使用有类（）。

我已经尝试了 3 个主要选项和单独的 plunk：

选项 1使用 ng-click 添加类 - http://plnkr.co/edit/0mrebo8BMlrz1YkttxsT?p=preview

$scope.navDirection = function(pageClass) {
    $scope.pageTransClass = pageClass;
};

  • 这会产生最好的结果，并且完全按照我的意愿导航，然后问题是当单击浏览器的后退或前进按钮时，类保持不变，这也是预期的。

  • 添加/更改进入和离开视图的类。

选项 2使用 $routeProvider 解析 - http://plnkr.co/edit/SPfgKUyYt7LMQITHzj2I?p=preview

resolve: {
   direction: ["changePageDirection",
       function(changePageDirection) {
           return changePageDirection.direction($route.current.params.pageId, $routeParams.pageId);
       }
   ]
}

  • 这会在添加类时产生延迟，即仅在第 3 次导航项单击时才真正开始工作。

  • 此方法缝合添加/更改类到“进入”动画，但“离开”仍保留旧类。

选项 3使用观察 - http://plnkr.co/edit/TwtkGrY1Ww4uYY8n2LO5?p=preview

return function(scope, element, attrs) {

    attrs.$observe("pageDirectionObs", function (value) {
        if (value) {
            element.addClass(value);
        }
    });
};

  • 就像选项 2 一样，仅在第 3 次单击时才真正开始工作。

  • 此方法缝合添加/更改“进入”动画的类，但“离开”仍保留旧类。

我开始认为我的主要问题是理解（或缺乏） $scope 以及 AngularJS 编译所有内容的方式。

我已经在这工作了好几个星期了，离我需要的地方更近了。任何帮助将不胜感激。

提前致谢。

更新：

  • 这是使用 ui-view 和 ui-view-extras 的第四个示例

  • 这是 plunk - embed.plnkr.co/vjSBLzMMKIrkHD7sOctN/preview

4

1 回答 1

0

我的解决方案实际上相当简单。我没有为每个方向更改类，而是将一个变量附加到 $rootScope，该变量在任何页面转换之前都会发生变化，并且动画基于 $rootScope 变量而不是类。

于 2015-04-28T09:37:44.327 回答