Modal hangs when opened mystery "solved"?

@sakotturi wrote:

I have a custom directive that, when clicked, opens an ionicModal. In my case, a "FAB" button that when clicked, launches a modal.

.directive('fabPickerDirective', ['$ionicModal',  function ($ionicModal) {
    return {
        restrict: 'E',
        scope: {
         someVars: "="
        },
        replace: false,
        link: function (scope, element, attrs) {

          // modal code
                  $ionicModal.fromTemplateUrl('myModalTemplate.html', {
                scope: scope,
                animation: 'slide-in-up'
            }).then(function (modal) {
                scope.modal = modal;
            });
            scope.openModal = function () {
                scope.modal.show();
                //alert('open modal');
            };
            scope.closeModal = function () {
                scope.modal.hide();
            };
            //Cleanup the modal when we're done with it!
            scope.$on('$destroy', function () {
                scope.modal.remove();
            });
            // Execute action on hide modal
            scope.$on('modal.hidden', function () {
                // Execute action
            });
            // Execute action on remove modal
            scope.$on('modal.removed', function () {
                // Execute action
            });

            element.on('click', function () {
                //alert('modal clicked' + scope.modal);
                scope.openModal();
            });

In order to launch the modal when clicked, that last bit of code element.on... launches the modal.
I was using "BIND" instead of "ON" and it looks like this was causing some serious lag as the modal would "slide-in" about an inch into the screen and then hang for a bit before continuing to the center of the screen.

The Chrome Dev Tools Timeline for "BIND":

Screen Shot 2015-09-24 at 8.03.30 AM.png744x1339 98.8 KB

Note the nearly 200ms and large memory usage. When running locally 200ms is normal, when running on a device, this would sometimes hang for seconds (up to 25 seconds)

Now, with using element.ON:

Screen Shot 2015-09-24 at 8.20.46 AM.png747x1136 102 KB

From 200 down to 65ms and most importantly, no visually noticeable lag in "slide-in".

Perhaps a JS-Pro could help explain why this is the case, from reading the Angular JQLite docs, there doesnt seem to be huge difference, in fact, I'd read somewhere they were somewhat interchangeable.

Any thoughts on why ON performs better than BIND in Ionic?

Thanks!

Posts: 1

Participants: 1

Read full topic