我在我的 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>
我正在尝试通过控制器中的“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>
在控制器中:
$scope.videoElem.on("load", function(event) {
console.log(videoElem[0].videoHeight);
console.log(videoElem[0].videoWidth);
});
AngularJS 框架在将元素添加到 DOM 后调用指令的 postLink 函数。这是实现依赖于元素存在的代码的最佳位置。
我在 $scope.videoElem.on(..) 的控制器中收到错误“无法读取未定义的属性 '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);
});
});
videoOnLink
在$compile 服务将指令链接到 DOM后调用该函数。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句