Directive that only works in the emulator, not in iOS or the iOS emulator

ionic-v1
1

Hi Everyone,

I’m having trouble debugging the following directive. It doesn’t show up at all on my iOS device or the iOS emulator, but is 100% functional in my chrome browser.

Has anybody had an issue like this?

HTML Reference

<rotate></rotate>

Angular Directive

angular.module('starter.controllers').directive('rotate', function() {
    return {
    templateUrl: "../templates/directives/rotation.html",
    controller:
    function Controller( $scope, $rootScope ) {

      $rootScope.position = 0;

      $scope.counterClockwise = function() {
        $scope.rotate(90);

        $rootScope.position += 1;
        if ($rootScope.position > 3)
          $rootScope.position = 0;

        console.log($rootScope.position);
      };

      $scope.clockwise = function(){
        $scope.rotate(-90);

        $rootScope.position -= 1;
        if ($rootScope.position < 0)
          $rootScope.position = 3;

        console.log($rootScope.position);


      };
  },
  restrict: 'E',
  link: function(scope, elm, attrs) {
    var globalDegrees = 0;

    //hack to get the 2nd child to apply rotation to the correct HTML elements
    var boxElement = elm.children().children().next();
    boxElement.splice(1, 1);

    console.log(boxElement);
    boxElement.css('transition', '-webkit-transform 800ms ease');

    scope.rotate = function(degrees) {
      globalDegrees += degrees;
      boxElement.css('-webkit-transform', 'rotate(' + globalDegrees + 'deg)');
    };
  }
};

})

HTML - rotation.html

<div class="row">
  <i style="display: inline;" class="col-33 ion-arrow-return-right pointer-icon positive" ng-click="counterClockwise()"></i>
  <div class="col-33" style="text-align: center">
    <div style="height: 100px; width: 100px; background-color: black; display: inline-block; border-radius: 10px;" >
      <div style="background-color: red; height: 10px; width: 10px; margin-top: 75px; margin-left: 5px;">
      </div>
    </div>
  </div>
  <i style="display: inline;" class="col-33 ion-arrow-return-left pointer-icon positive" ng-click="clockwise()"></i>
</div>

I put most of my CSS inline in case I’m doing something flagrantly offensive that would cause an issue like this. Any suggestions would be greatly appreciated.

Thanks!

2

Hi Again,

I’ve figured out my issue in case anybody else is having similar woes. It seems that the line:

templateUrl:"../templates/directives/rotation.html"

in my directive actually needs to be:

templateUrl:"templates/directives/rotation.html"

Thanks