ajax 成功后无法更新 ion-slide

Question

我在更新离子框架幻灯片时遇到问题。我整理了一个 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 与控制器中的不再相同。您可以执行以下操作：

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

Answer 2

找到了！这是我的错误。同一个控制器里面有一个控制器。

ng-controller="UserSearchCtrl"

ajax 成功后无法更新 ion-slide

Can't update ion-slide on ajax success

ajax

angularjs

angularjs-ng-repeat

ionic-framework