Ionic Modal Slider problem: could not find the corresponding element with delegate descriptor = on $ emit

Question

I have an Ionic app with multiple angular controllers. One of the controllers is LoginCtrl, and the other is RegisterCtrl. The problem is that I call $ emit inside Login Ctrl to open the modal with the slider from RegisterCtrl:

HTML modal template

<!-- A very cut down version of my code -->
<ion-content class="register-wrapper">
    <ion-slide-box delegate-handle="registerSlider" show-pager="false">
        <ion-slide class="padding">
            Slide 1
        </ion-slide>
        <ion-slide class="padding">
            Slide 2
        </ion-slide>
        <ion-slide class="padding">
            Slide 3
        </ion-slide>
    </ion-slide-box>

</ion-content>

LoginCrtl

$rootScope.$emit("showRegisterPopup", {data:'somedata'});

RegisterCrtl

// This is a cut down version of the code
$ionicModal.fromTemplateUrl('templates/modals/register-form1.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function (modal) {
    $scope.modal = modal;
    $scope.registerModalSlider = $ionicSlideBoxDelegate.$getByHandle('registerSlider');
    $scope.registerModalSlider.enableSlide(false);
});

$rootScope.$on("showRegisterPopup", function(emitEvent, somedata){
    if ($scope.registerModalSlider){
        $timeout(function({
            $scope.registerModalSlider.slide(2);
        },200);
    }
    rc.showRegister();
});

The problem is that when I call the .slide () function of the slider, it is not sliding to the specified page, and I get the following error:

Delegate for handle "registerSlider" could not find a corresponding element with delegate-handle="registerSlider"! slide() was not called!
Possible cause: If you are calling slide() immediately, and your element with delegate-handle="registerSlider" is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to slide() and try again.

As you can see, I set the delegate descriptor in HTML, and I already have a .slide () call during the timeout, and this did not fix the problem.

Answer 1

, "active-slide" . , , .

:

<ion-slide-box delegate-handle="registerSlider" show-pager="false" active-slide="currentSlide">
</ion-slide-box>

:

//Instead of this:
if ($ionicSlideBoxDelegate.$getByHandle('registerSlider')){
    $ionicSlideBoxDelegate.$getByHandle('registerSlider').slide(2);
}

// Do this...
$scope.currentStep = 2;

Answer 2

github

, , delegateHandle .

,

Like this:

scope: {
        //
        delegateHandle: '@'
      }

,

`$scope.registerModalSlider = $ionicSlideBoxDelegate.$getByHandle('registerSlider',$attr.delegateHandle);

`

$scope.registerModalSlider = $ionicSlideBoxDelegate.$getByHandle('registerSlider',$scope.delegateHandle);

, delegates will be interpolated, .

, @mikesurowiec, , random generated delegate handle

angular.module('app').directive('randomDelegateHandle', [function () {
  return {
    priority: 1000,
    restrict: 'A',
    compile: function compile(tElement, tAttrs, transclude) {
        tAttrs.$set('delegateHandle', Math.random().toString(36).substring(7));
        return function postLink(scope, iElement, iAttrs, controller) {}
    }
};

}]);

, GitHub.

, .

github