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

Question

我在更新 ionic 框架幻灯片时遇到问题。我整理了一个 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
        }

    //};
});

更新
如果我在单击时调用该函数，它也可以工作。似乎只有当提交调用更新它的函数时，幻灯片才不起作用。

Answer 1

因为它是异步的，我认为您的 $ionicSlideBoxDelegate 不再与您的 Controller 中的相同。您可以执行以下操作:

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 不工作，所以我无法测试这个，但我认为它会工作。