javascript - 如何在 Angularjs 中获取 $mdDialog 中的 HTML 元素

Question

我在我的 Angular 应用程序中实现了一个 $mdDialog，当我单击按钮时，它由以下代码显示:

            // Show the dialog
        $mdDialog.show({
            clickOutsideToClose: true,
            controller: function($mdDialog) {
                this.item = item;
                this.close = function() {
                    $mdDialog.cancel();
                };
        var video = document.getElementById('video');

            },
            controllerAs: 'dialog',
            templateUrl: 'templateurl',
            targetEvent: $event
        });

在我的 templateurl 中是一个包含以下元素的 HTML 文档

<video id="video"></video>

我正在尝试通过 Controller 中的“document.getElementById”访问视频元素(请参阅代码)。由于 Controller 是在 html 渲染之前加载的，所以我返回了一个 null 对象...

有人已经实现了这个目标吗？

Answer 1

创建一个指令将元素置于范围内:

app.directive("onElemLink", function() {
    return postLink;
    function postLink(scope, elem, attrs) {
        scope.$eval(attrs.onElemLink, {$elem: elem});
    }
});

用法:

<video on-elem-link="videoElem=$elem"></video>

在 Controller 中:

$scope.videoElem.on("load", function(event) {
    console.log(videoElem[0].videoHeight);
    console.log(videoElem[0].videoWidth);
});

AngularJS 框架在将元素添加到 DOM 后调用指令的 postLink 函数。这是实现依赖于元素是否存在的代码的最佳位置。

<小时/>

I get the error "Cannot read property 'on' of undefined" in my controller at $scope.videoElem.on(..). I think this is because the code is executed no matter if the directive has been loaded?

使用该指令的另一种方法是提供一个函数:

<video on-elem-link="videoOnLink($elem)"></video>

在 Controller 中:

$scope.videoOnLink(elem) {
    console.log("video element linked");
    $scope.videoElem = elem;
    $scope.videoElem.on("load", function(event) {
        console.log(videoElem[0].videoHeight);
        console.log(videoElem[0].videoWidth);
    });
});

videoOnLink 函数在 $compile service 之后调用将指令链接到 DOM。