ActionSheet inside directive - strange behaviour


#1

Apologies for the long question!

I have a directive to handle URLs so they open using the inAppBrowser and do other things behind the scenes like MI capture i.e.

.directive('browseTo', function (Gesture, Platform) {
  return {
    restrict: 'A',
    link: function ($scope, $element, $attrs) {
      var handleTap = function (e) {
        // .. do stuff like send Google Analytics event
        var inAppBrowser = window.open(encodeURI($attrs.browseTo), '_system');
      };

      var tapGesture = Gesture.on('tap', handleTap, $element);
      $scope.$on('$destroy', function () {
        Gesture.off(tapGesture, 'tap', handleTap);
      });
    }
  }
})

I use it like this:

<div browse-to="https://maps.google.com/maps?q={{location}}"></div>

And it works nicely. I then wanted to add a confirm box to this process but thought it would be cool to use an ActionSheet instead of a confirm box. So now I have the ActionSheet service being injected, and the window.open inside the buttonClicked function like so:

.directive('browseTo', function (Gesture, Platform, ActionSheet) {
  return {
    restrict: 'A',
    link: function ($scope, $element, $attrs) {
      var handleTap = function (e) {
        ActionSheet.show({
          buttons: [{ text: 'View in browser' }],
          titleText: 'External link',
          cancelText: 'Cancel',
          cancel: function () {
            return true;
          },
          buttonClicked: function (index) {
            // .. do stuff like send Google Analytics event
            var inAppBrowser = window.open(encodeURI($attrs.browseTo), '_system');
            return true;
          }
        });
      };

      var tapGesture = Gesture.on('tap', handleTap, $element);
      $scope.$on('$destroy', function () {
        Gesture.off(tapGesture, 'tap', handleTap);
      });
    }
  }
})

To test it I go to index.html in my browser, navigate from my home page to my test page, tap on my link and the ActionSheet overlay appears but doesn’t show the slideup buttons. Then when I press back (on my browser) the page navigates backward to the home page and then shows the slide up buttons! The buttons all work correctly when clicked so the ActionSheet appears to but wired up correctly. I’m not sure if its the navigation or declaration within a directive that is causing this strange behaviour.


#2

I have exactly the same problem. Did you find a solution? A codepen that illustrates what I’m trying to do: http://codepen.io/anon/pen/tfmdn


#3

I have the same problem


#4

any solution for this so far? i’m using the latest build but still have such problem


#5

I also want to use actionSheet inside a directive, I created a codepen with the nightly builds http://codepen.io/felquis/pen/raVzWL


Define a reusable ActionSheet with service/directive
#6

Hey guys, it was solved, check this answer on GitHub https://github.com/driftyco/ionic/issues/2610#issuecomment-64740370 :slight_smile: