私はui-bootstrapとui-routerを使用しています。私は、これはアクティブなスライドとしてカルーセル「123」と表示スライド「789」をロードしルートがBootstrapカルーセル内のスライドに対応するようにして、スライドが変更されたときにそのルートを更新します。
/carousel/123/slide/789
、私のようなカルーセル内のスライドにリンクすることを可能にするURLの構造を持っていると思います。
このURLは、スライドが表示しているものを反映するように更新したいと思います。
私はルートを更新するいくつかの方法を試しましたが、それは意図したとおりに動作しますが、論理的には動作しないケースがあるため、ジョブは完了しません。
私はコントローラについてDOMについて知っていることを知っていますが、下のサンプルコードのようにJQueryを使用するとAngularな方法ではありませんが、私が解決しようとしている問題については重要ではないと思います。 ベストプラクティスを実装するのではなく、このアプリケーションにルートを追加するように求められました。物事を指示に移動させたり、それ以外の方法で修正したりすると、現在の問題を解決するのに役立ちます。是非とも、私はそれを望みます。そうでなければ、別の日のために残さなければなりません。
私が試した最初のものは、ロードされた最初のページのための経路を活性化しない：私のコントローラで
、私の設定で
jQuery($scope.data.carouselSelector).on('slide.bs.carousel', function() {
var newRoute = $state.href($state.current, {photoId:currentPhoto.id});
$location.path(newRoute);
}
、
.run(['$urlRouter', function ($urlRouter) {
$rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) {
e.preventDefault();
// This doesn't work because newUrl and oldUrl are the same when the app fires up at a route
if (newUrl !== oldUrl) {
$urlRouter.sync();
} else {
console.log('SKIP SYNCING');
}
});
$urlRouter.listen();
}]);
私が試した二つ目変更が既に発生したため、経路をスキップする必要があることを示すクエリパラメータを追加していました。
で - 私のコントローラで
、私の設定で
jQuery($scope.data.carouselSelector).on('slide.bs.carousel', function() {
var newRoute = $state.href($state.current, {photoId:currentPhoto.id});
$location.path(newRoute + '?ok=1');
}
、
.run(['$urlRouter', function ($urlRouter) {
$rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) {
e.preventDefault();
// I also tried adding a query parameter when the slide changes after the carousel has been loaded. But there is no way of knowing why skipSync=1 is in the URL. A user could have bookmarked it or even just reloaded the poage for instances.
if (newUrl.indexOf('skipSync=1') !== -1) {
$urlRouter.sync();
} else {
console.log('SKIP SYNCING');
}
});
$urlRouter.listen();
}]);
はもう少し物事を複雑にするには、カルーセルは、私がこのようなオープンモーダルであります私の設定、
.state("search.photo-view", {
url: "/photo/:photoId",
onEnter: ['$state', '$modal', function($state, $modal) {
$modal.open({
templateUrl: "photo-fullscreen.html",
controller: "PhotoFullscreenController"
}).result.finally(function() {
$state.go('^');
});
}]
})
私はモーダルが開かれているかどうか私が設定から知ることができた方法があれば、私はそれがカルーセルを含んでいると仮定して、私が望むスライドを既に表示していると思います。