Javascript 如何在Angularjs中获取$mdDialog中的HTML元素
我在angular应用程序中实现了一个$mdDialog,当我单击按钮时,该对话框由以下代码显示:Javascript 如何在Angularjs中获取$mdDialog中的HTML元素,javascript,html,angularjs,Javascript,Html,Angularjs,我在angular应用程序中实现了一个$mdDialog,当我单击按钮时,该对话框由以下代码显示: // Show the dialog $mdDialog.show({ clickOutsideToClose: true, controller: function($mdDialog) { this.item = item; this.clos
// 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
});
在我的模板中,URL是一个包含以下元素的HTML文档
<video id="video"></video>
我试图通过控制器中的“document.getElementById”访问视频元素(请参见代码)。因为控制器是在html呈现之前加载的,所以我得到一个空对象
有人已经做到了吗?创建一个指令,将元素放入范围:
app.directive("onElemLink", function() {
return postLink;
function postLink(scope, elem, attrs) {
scope.$eval(attrs.onElemLink, {$elem: elem});
}
});
用法:
<video on-elem-link="videoElem=$elem"></video>
AngularJS框架在将元素添加到DOM后调用指令的postLink函数。这是实现依赖于元素存在的代码的最佳位置
我在控制器$scope.videoElem.on(..)中收到错误“无法读取未定义的属性'on'。我认为这是因为无论指令是否已加载,代码都会执行 使用该指令的另一种方法是提供一个函数:
<video on-elem-link="videoOnLink($elem)"></video>
videoOnLink
函数是在将指令链接到DOM之后调用的。您的回答很有道理,谢谢您。然而,我在控制器$scope.videoElem.on(..)中得到错误“无法读取未定义的属性'on'。我认为这是因为无论指令是否已加载,代码都会执行?函数不会被调用…我不知道我做错了什么。它现在可以工作了。但我已经找到了解决办法。我设置了一个按钮,可以点击视频元素。有了这些,我可以保证视频元素已经在DOM中,并且不是空的。当你问一个由你的代码引起的问题时,如果你提供人们可以用来重现问题的代码,你会得到更好的答案。看见
<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);
});
});