在角度方向的元素之前插入

insert before element in angular directive

本文关键字：插入 元素 方向      更新时间：2023-09-26

这是我的html代码：

<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>

这是我的指示

.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');
        });
      }
    };

spinnerElement是在iframe标记之后添加的，但我想在ifame标记之前添加spinnerElement，但无法将spinnerElement添加到iframe标签之前。非常感谢您的帮助。

更换

elem.parent().append(spinnerElement) ;

带有

elem.before(spinnerElement) ;

当我发现这个答案时，我正努力解决类似的问题，试图在带有指令的元素之前插入html。不幸的是，尹刚的答案需要使用jquery，而不是angular附带的jqlite；因此，对于不使用jquery的人来说，这是行不通的。

要在没有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');
      });
    }
  };
});
相关文章：