角度指令等内容

Question

我想使我的iframe响应。我正在使用打字机的角度指令来实现这一点。

这是代码：

... 
export class ContentDirective implements angular.IDirective { 
    public priority = -1; 
    public restrict = 'A'; 
    public scope = {}; 

    static $inject = [ 
     "$window" 
    ]; 

    constructor(private $window, private $timeout, private $compile) { 

    } 

    public link: angular.IDirectiveLinkFn = (scope: angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes): void => { 
     this.handleResize(element); 
    }; 

    private handleResize(element): void { 
     var win = angular.element(this.$window); 
     // Find all iframes 
     var $allVideos = element.find("iframe"), 
     // The element that is fluid width 
      $fluidEl = element; 

     // Figure out and save aspect ratio for each iframe 
     $allVideos.each(function() { 
      $(this) 
       .data('aspectRatio', this.height/this.width) 
       // and remove the hard coded width/height 
       .removeAttr('height') 
       .removeAttr('width'); 
     }); 

     // When the window is resized 
     win.resize(() => { 
      var newWidth = $fluidEl.width(); 
      // Resize all iframes according to their own aspect ratio 
      $allVideos.each(function() { 
       var $el = $(this); 
       $el 
        .width(newWidth) 
        .height(newWidth * $el.data('aspectRatio')); 
      }); 
     }).resize(); 
    } 

    public static factory(): angular.IDirectiveFactory { 

     var directive = ($window) => { 
      return new ContentDirective($window); 
     }; 

     directive.$inject = ['$window']; 
     return directive; 
    } 
} 
... 

这是我使用的HTML的一部分：

... 
<p ng-bind-html="body" content-directive></p> 
... 

“身体” 是与对标签的内容的角度的表达。 Iframe在那里。

我遇到的问题是，当指令开始执行时，p标记内没有任何iframe元素。 当我把$超时等待DOM然后一切工作正常。

如何在加载DOM后开始执行指令？

我发现这里的解决方案：

thanks to mohamedrias

因此工作代码看起来像这样：

export class ContentDirective implements angular.IDirective { 
    public priority = 10; 
    public restrict = 'A'; 

    static $inject = [ 
     "$window" 
    ]; 

    constructor(private $window) { 

    } 

    public link: angular.IDirectiveLinkFn = (scope: angular.IScope, element: angular.IAugmentedJQuery, attrs): void => { 
     scope.$watch(attrs.ngBindHtml,() => { 
      this.handleResize(element); 
     }); 
    }; 

    private handleResize(element): void { 
     var win = angular.element(this.$window), 
     // Find all iframes 
      $allVideos = element.find("iframe"), 
     // The element that is fluid width 
      $fluidEl = element; 

     // Figure out and save aspect ratio for each iframe 
     $allVideos.each(function() { 
      $(this) 
       .data('aspectRatio', this.height/this.width) 
       // and remove the hard coded width/height 
       .removeAttr('height') 
       .removeAttr('width'); 
     }); 

     // When the window is resized 
     win.resize(() => { 
      var newWidth = $fluidEl.width(); 
      // Resize all iframes according to their own aspect ratio 
      $allVideos.each(function() { 
       var $el = $(this); 
       $el 
        .width(newWidth) 
        .height(newWidth * $el.data('aspectRatio')); 
      }); 
     }).resize(); 
    } 

    public static factory(): angular.IDirectiveFactory { 

     var directive = ($window) => { 
      return new ContentDirective($window); 
     }; 

     directive.$inject = ['$window']; 
     return directive; 
    } 
} 

Answer 1

正如泰勒在评论建议我把答案分别

我在这里找到解决方案：

thanks to mohamedrias

因此工作代码看起来像这样：

export class ContentDirective implements angular.IDirective { 
public priority = 10; 
public restrict = 'A'; 

static $inject = [ 
    "$window" 
]; 

constructor(private $window) { 

} 

public link: angular.IDirectiveLinkFn = (scope: angular.IScope, element: angular.IAugmentedJQuery, attrs): void => { 
    scope.$watch(attrs.ngBindHtml,() => { 
     this.handleResize(element); 
    }); 
}; 

private handleResize(element): void { 
    var win = angular.element(this.$window), 
    // Find all iframes 
     $allVideos = element.find("iframe"), 
    // The element that is fluid width 
     $fluidEl = element; 

    // Figure out and save aspect ratio for each iframe 
    $allVideos.each(function() { 
     $(this) 
      .data('aspectRatio', this.height/this.width) 
      // and remove the hard coded width/height 
      .removeAttr('height') 
      .removeAttr('width'); 
    }); 

    // When the window is resized 
    win.resize(() => { 
     var newWidth = $fluidEl.width(); 
     // Resize all iframes according to their own aspect ratio 
     $allVideos.each(function() { 
      var $el = $(this); 
      $el 
       .width(newWidth) 
       .height(newWidth * $el.data('aspectRatio')); 
     }); 
    }).resize(); 
} 

public static factory(): angular.IDirectiveFactory { 

    var directive = ($window) => { 
     return new ContentDirective($window); 
    }; 

    directive.$inject = ['$window']; 
    return directive; 
} 
}