angularjs - 如何将 ui-routing 与 ionic 滑盒一起使用?

标签 angularjs cordova angular-ui-router ionic phonegap-build

ionic 幻灯片框需要使用如下脚本标签进行路由:
http://codepen.io/calendee/pen/Kbpyg/

在这里,它是通过使用 <script> 来完成的。标签和给予id属性为 something.html在一个页面中。我正在寻找一个可以使用 $stateProvider 的 slider 实现。 ionic 框架(ng-route 在这里不起作用),并为每个页面制作不同的 html 模板。

最佳答案

将索引作为状态参数传递给您的状态,确保您的 slider 上有一个委托(delegate)句柄,并且您可以滑动到 Controller 中的特定索引,如下所示:

示例 Controller :

    .controller('MyCtrl', function($scope, $state, $stateParams, $slideBoxDelegate){
            var mySlider = angular.getElementById(document.getElementById('mySliderContainer'));
            var handle = mySlider.querySelector('.slider').getAttribute('delegate-handle');
            var ionicSlideBoxDelegate = $ionicSlideBoxDelegate;

            $scope.$on('$ionicView.afterEnter', function(){
                    var index = $stateParams.index;
                    ionicSlideBoxDelegate = $ionicSlideBoxDelegate.$getByHandle(handle);
                    ionicSlideBoxDelegate.slide(index);
            });
   });

您可以使用 ionicSlideBoxDelegate 在幻灯片中移动。
上面的代码应该可以工作,但是我还没有测试过。

关于angularjs - 如何将 ui-routing 与 ionic 滑盒一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30445366/

相关文章:

angularjs - 在表格 Angular 中正确显示 JSON

android - 将 Build.PhoneGap.com 与 A​​ndroid 设备一起使用会导致 'cannot call method ' getPicture' of undefined'

javascript - 获取上一页 phonegap javascript

javascript - Controller 内的 angular-ui-router 函数不是函数

javascript - 如何使用 $transitions 服务获取 toState 参数? (新的用户界面路由器)

javascript - 未从 $http 范围设置 Angular 绑定(bind)变量

javascript - 来自 ng-model 的 Controller 中的未定义参数

android - Android 上的 Chrome 浏览器 : Granted Quota for IndexedDB suddenly almost 0

javascript - AngularJS 与 ui.router : reload page when clicking the same state link

javascript - Angular 电子邮件验证空和模式