1

私はAngularJSの完全な初心者であり、最初のプロジェクトの構築を開始しましたが、あらゆる段階で障害にぶつかっています...

私は非常に単純なものを構築しようとしています。これが私が達成しようとしていることの要点です:

  • この記事 (blog.brunoscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app) に基づいて、JSON データを使用して取り込まれ、作成された 5 つのページ/ビューがあります。これは工場に配線されています。getJSON()

    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 をクリックして戻ると、ビューが左から右に移動するなどです。 hasClass()。

別々のプランクで3つの主要なオプションを試しました：

オプション 1 ng-click を使用してクラスを追加する - http://plnkr.co/edit/0mrebo8BMlrz1YkttxsT?p=preview

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

  • これにより、最良の結果が得られ、希望どおりにナビゲートされます。問題は、ブラウザの戻るボタンまたは進むボタンをクリックしたときに、クラスが同じままであることです。

  • 入るビューと出るビューの両方のクラスを追加/変更します。

$routeProvider 解決を使用するオプション 2 - http://plnkr.co/edit/SPfgKUyYt7LMQITHzj2I?p=preview

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

  • これにより、クラスを追加するときに遅延が発生します。つまり、実際には 3 回目のナビゲーション項目のクリックでのみ機能し始めます。

  • このメソッドは、クラスを「開始」アニメーションに追加/変更するように縫い付けられていますが、「終了」はまだ古いクラスを保持しています。

Observe を使用したオプション 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 を使用した 4 番目の例を次に示します。

  • これがプランクです-embed.plnkr.co/vjSBLzMMKIrkHD7sOctN/preview

4

1 に答える 1

0

私の解決策は実際にはかなり単純でした。方向ごとにクラスを変更する代わりに、変数を $rootScope にアタッチしました。この変数は、ページ遷移の前に変更され、クラスではなく $rootScope 変数に基づいてアニメーションを作成しました。

于 2015-04-28T09:37:44.327 に答える