Question

这是我的指示：

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

这是我的html文件，在哪里使用指令

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

我只想替换

<div iframe-onload ></div>

带

<div id="appApprovalSpinner" class="row text-center approve-spinner"><i class="fa fa-spinner fa-pulse fa-5x fa-fw margin-bottom"></i></div>'

并保持iframe不变，因为我想在iframe完成加载时调用onLoad事件。任何建议如何替换唯一的div标签，而不是iframe标签。感谢

Answer 1

您可以使用private void rToolStripMenuItem_Click(object sender, EventArgs e) { if (frmRep != null) { if (frmRep.Visible == false) { frmRep = new frmReportes(); frmRep.MdiParent = this; frmRep.Show(); } else { frmRep.Activate(); return; } } else { frmRep = new frmReportes(); frmRep.MdiParent = this; frmRep.Show(); } }和ng-show轻松完成此操作，而不是进行如此多的DOM操作，并使用指令指定的ng-hide变量跟踪事物。 / p>

稍微改变你的指令：

$scope

Answer 2

我做了以下更改指令：

 .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>');
        if ( (angular.element(elem).hasClass('spinner')) && scope.isRequired ) {
          elem.replaceWith(spinnerElement);
        }
        angular.element('#appApprovalSpinner').addClass('ng-show');
        elem.on('load', function(){
          angular.element('#appApprovalSpinner').addClass('ng-hide');
        });
      }
    };
  });

在html文件中我有这个

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

虽然有效但仍然需要在那里。注意如果没有标签，它将无法工作任何使其无需额外标签的解决方案？

如何用angular指令中的不同html替换第一个元素

2 个答案: