insert before element in angular directive

Question

Here is my html code:

<div class="row">
  <div ng-if="isLoadingApprovalUrl" class="col-xs-12">
    <div class="text-center"><span class="fa fa-spinner fa-pulse fa-5x fa-fw margin-bottom"></span></div>
  </div>

  <div ng-if="!isLoadingApprovalUrl" class="col-xs-12">
    <div ng-if="isAppApproved" class="alert alert-success">{{'WORKSPACE_APPS.APPROVE_GOOGLE_APPS.SUCCESS' | translate}}</div>
    <div class="alert alert-danger" ng-show="errors.length > 0">
      <ul><li ng-repeat="error in errors">{{error}}</li></ul>
    </div>

    <iframe id="appApprovedId" ng-if="approvalUrl" class="approve-iframe" ng-class="{'app-approved': isAppApproved}" ng-src="{{trustedApprovalUrl}}" iframe-onload></iframe>

    <div ng-if="!isApprovalRequired" class="alert alert-info" translate="WORKSPACE_APPS.APPROVE_GOOGLE_APPS.ALREADY_APPROVED" translate-values="{appTitle: googleApp.title}"></div>
  </div>
</div>

here is my directive

.directive('iframeOnload', function() {
    return {
      restrict: 'A',
      scope: {
        isRequired: '='
      },
      link: function(scope, elem){
        var spinnerElement = angular.element(' <div ng-if="isApprovalRequired" id="appApprovalSpinner" class="row text-center approve-spinner"><i class="fa fa-spinner fa-pulse fa-5x fa-fw margin-bottom"></i></div>');

       elem.parent().append(spinnerElement) ;

        angular.element('#appApprovalSpinner').addClass('ng-show');
        elem.on('load', function(){
          angular.element('#appApprovalSpinner').addClass('ng-hide');
        });
      }
    };

The spinnerElement is added after iframe tag but I want to add spinnerElement before iframe tag but couldn't make it works to have spinnerElement is added before iframe tag . Any help is greatly appreciated.

Answer 1

Replace

elem.parent().append(spinnerElement) ;

with

elem.before(spinnerElement) ;

Answer 2

I was struggling with a similar issue, trying to insert html before an element with a directive, when I found this answer. Unfortunately, the answer by Yin Gang requires the use of jquery, not the jqlite that comes with angular; so for people not using jquery, that will not work.

To do this without jquery:

.directive('iframeOnload', function() {
  return {
    restrict: 'A',
    scope: {
      isRequired: '='
    },
    link: function(scope, elem, attrs) {
      var spinnerElement = angular.element('<div ng-if="isApprovalRequired" id="appApprovalSpinner" class="row text-center approve-spinner"><i class="fa fa-spinner fa-pulse fa-5x fa-fw margin-bottom"></i></div>');

      elem.parent()[0].insertBefore(spinnerElement[0], elem[0]);

      angular.element('#appApprovalSpinner').addClass('ng-show');
      elem.on('load', function() {
        angular.element('#appApprovalSpinner').addClass('ng-hide');
      });
    }
  };
});