Question

我想让我的iframe响应。我正在使用带有typescript的angular指令来实现它。

这是代码：

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

＆＃34;主体＆＃34;是具有p标签内容的角度表达。 iframe在那里。

我遇到的问题是当指令开始执行时，p标签内没有任何iframe元素。当我把$ timeout等待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

所以工作代码看起来像这样：

.length()

angular directive等待内容

1 个答案: