1

AngularJS と Foundation を使用して Web アプリケーションを作成しています。

Foundation でパックされた Orbit コンテンツ スライダーを使用すると、問題が発生します。これには、財団の初期化関数 $(document).foundation() への呼び出しが必要です。私は ng-view と AngularJS ルーティング機能を使用しているため、新しいビューが読み込まれるたびにこの関数を呼び出す必要があります。すべてのルートによってロードされるコントローラー関数に呼び出しを入れることで、これを達成しようとしました。しかし、ビューまたはページをリロードするまで軌道スライダーが表示されないため (画像または実際のビューが読み込まれる直前)、スクリプトの実行が早すぎると思います (画像がキャッシュされていると推測しています)。その後、バックグラウンドですぐにロードできます)。基盤関数の呼び出しに $routeChangeSuccess イベントも使用してみましたが、これでも同じ結果が得られます。

画像読み込みイベントにバインドするディレクティブも作成しましたが、これが実際に機能するようになり、ビューを初めて読み込んだときからスライダーが正しく表示されます。画像のないページでも基本呼び出しを行う必要があります。このアプローチを使用するとコンテンツが点滅します（Orbit で使用される UL アイテムの弾丸が現れたり消えたりするのを実際に見ることができます）

私は AngularJS を使い始めたばかりなので、自分がしていること/言っていることが完全に正しいかどうかわかりません。:)

私はいくつかの調査を行い、この問題の解決策を見つけるのに役立つ可能性のある約束と解決について何かを読みましたが、これがどのように行われるかを確認できませんでした。

前もって感謝します！

4

2 に答える 2

1

私はパーティーに遅れましたが、他の人のために、ng-view がロードされた後にファンデーションをロードする方法を次に示します。ビューがロードされたときに基礎を初期化します。

angular.module('exampleAppApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
})
// initialize foundation here...
.run(function($rootScope) {
 $rootScope.$on('$viewContentLoaded', function () {
   $(document).foundation();
});
});
于 2015-01-22T07:56:23.197 に答える