Implant / inject event function to every (change of src) page in iframe with AngularJs

To inject an event manually with AngularJs (from the outside of child iframe),
you'll need two key things:

• window.onload()
• window.onmousedown

You'll need an angular directive to help injecting the event function and iframe page being "load".

// inject touch event to iframe child body
angular.directive('iframe', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      element[0].onload = function() {
        scope.loaded();
      };
    },
    controller: function($scope, $window) {
      $scope.loaded = function() {
        $window.frames[0].window.onmousedown = function() {
          alert('Touched!');
        };
      };
    }
  };
});

Firstly, from element[0], you'll get your iframe element.
2nd, prepare a "loaded()" function to let "link()" to initiate for "onload()".


This solution made by the inspiration from AngularJS: onLoad from an iframe directive by Ashish Datta

Changing current $state will "back" button instead of menu button

How not to keep view history as you use $state.go()?

Menu button (icon)

In ionic (v1.2.4), when we are trying to change current state to other state,
it'll substitute "menu" button as "Back" button :

  $state.go('app.home');

Back button (icon)

or even solution below also won't help from showing the back button (icon).

  $state.go('app.home', {}, {
    location: 'replace',
    reload: true,
    inherit: false
  });

And gratefully, until I found a solution on stackoverflow, where people also facing the same issue as I did.

with code

  $ionicHistory.nextViewOptions({
    disableBack: true
  });

is enough to achieve my expected ("refresh" view history) result.

angular.controller('AppCtrl', function($state, $ionicHistory) {
  
  $scope.goHome = function () {
    $ionicHistory.nextViewOptions({
      disableBack: true
    });
    $state.go('app.home');
  };

});