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

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!

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