无法在ajax成功时更新ion-slide

2023年12月16日 177次阅读

我无法更新我的离子框架幻灯片.我整理了一个
jsfiddle,它是当前的形式,不起作用,但是,你可以在那里看到代码.

我的问题是,如果仅用于测试目的,我在加载页面时使用ajax,它工作得很好.如果我使用超时来模仿异步性,它也有效.

如果我在ngSubmit上设置了一个函数,那么幻灯片不会更新,但是,ajax的成功部分会检索数据.我也可以在html端打印,但幻灯片不会更新.

谁能告诉我为什么？

HTML：

<ion-view view-title="Search" ng-controller="UserSearchCtrl" class="title-left">
    <ion-content scroll="false">

        <div class="list">
            <form ng-submit="retrieveResults()" ng-controller="UserSearchCtrl">
                <input type="text" placeholder="Search" ng-model="criteria">
            </form>
        </div>

        <div class="search-results">
            <ion-slide-box show-pager="false">
                <ion-slide ng-repeat="user in result.users" class="img-box-6">
                    {{user}}
                </ion-slide>
            </ion-slide-box>
        </div>

    </ion-content>
</ion-view>

JavaScript,这是行不通的：

engine.module.controller('UserSearchCtrl', function($scope, $rootScope, $http, $ionicSlideBoxDelegate, $timeout, $state, $stateParams, $db, $user) {

    $ionicSlideBoxDelegate.enableSlide(false);
    $scope.width = window.outerWidth;

    // if I wrap the below ajax fn in a function, called on submit, it stops working
    $scope.retrieveResults = function() {
        var token = $rootScope.user.token;

        if ($scope.criteria !== '') {

            $http.get(engine.config.REMOTE_URL + '/search?' + 'token=' + token) 
                .success(function(response) {
                    $scope.result = response.data;

                    // debug - they both alert the same thing
                    //alert(response.data.search_type);
                    //alert($scope.result.search_type);

                    $ionicSlideBoxDelegate.enableSlide(true);
                    $ionicSlideBoxDelegate.update();
                })

        } else {
            // ALERT: criteria is not set
        }

    };
});

JavaScript,没有ngSubmit工作：

engine.module.controller('UserSearchCtrl', function($scope, $rootScope, $http, $ionicSlideBoxDelegate, $timeout, $state, $stateParams, $db, $user) {

    $ionicSlideBoxDelegate.enableSlide(false);
    $scope.width = window.outerWidth;

    //$scope.retrieveResults = function() {
        var token = $rootScope.user.token;

        if ($scope.criteria !== '') {

            $http.get(engine.config.REMOTE_URL + '/search?' + 'token=' + token) 
                .success(function(response) {
                    $scope.result = response.data;

                    $ionicSlideBoxDelegate.enableSlide(true);
                    $ionicSlideBoxDelegate.update();
                })

        } else {
            // ALERT: criteria is not set
        }

    //};
});

UPDATE
如果我在点击时调用该功能,它也可以.似乎幻灯片仅在提交调用更新它的函数时才起作用..

最佳答案 因为它是Async,我认为你的$ionicSlideBoxDelegate与你的控制器不再相同.你能做的是以下几点：

engine.module.controller('UserSearchCtrl', function($scope, $rootScope, $http, $ionicSlideBoxDelegate, $timeout, $state, $stateParams, $db, $user) {

    var currentIonicSlideBoxDelegate = $ionicSlideBoxDelegate;
    currentIonicSlideBoxDelegate.enableSlide(false);
    $scope.width = window.outerWidth;

    // if I wrap the below ajax fn in a function, called on submit, it stops working
    $scope.retrieveResults = function() {
        var token = $rootScope.user.token;

        if ($scope.criteria !== '') {

            $http.get(engine.config.REMOTE_URL + '/search?' + 'token=' + token) 
                .error(function(err) {
                    // ERROR: HTTP GET
                })
                .success(function(response) {
                    $scope.result = response.data;

                    // debug - they both alert the same thing
                    //alert(response.data.search_type);
                    //alert($scope.result.search_type);

                    currentIonicSlideBoxDelegate.enableSlide(true);
                    currentIonicSlideBoxDelegate.update();
                })
                .finally(function() {
                    //
                });

        } else {
            // ALERT: criteria is not set
        }

    };
});

你jsFiddler没有工作所以我无法测试这个,但我认为它会工作.

点赞