Question

我在我的角度应用程序中实现了一个$ 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>

我试图通过我的控制器中的“document.getElementById”访问视频元素（参见代码）。由于在渲染html之前加载控制器，我得到一个空对象......

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

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>

在控制器中：

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

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

我收到错误＆＃34;无法读取属性＆＃39; on＆＃39;未定义＆＃34;在我的控制器$ scope.videoElem.on（..）。我认为这是因为无论指令是否已被加载，代码都会被执行？

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

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

在控制器中：

$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);
    });
});

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

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

1 个答案: