AngularJs: document.body.onfocus内部指令控制器

AngularJs: document.body.onfocus inside directive controller

本文关键字：内部 指令控制器 onfocus body document AngularJs      更新时间：2023-09-26

当用户关闭或取消File Upload窗口时，我试图捕获事件

<input type="file">

由于没有内置的监听器用于文件上传的关闭事件，我试图通过document.body.focus事件捕获它，就像这里建议的那样

我让它运行使用javascript

document.body.onfocus = function() { console.log("hit me") }

现在我需要在Angular的指令中实现它，这样我就可以使用控制器中的对象将逻辑放入focus事件中。

如何访问document.body的onfocus事件在一个角控制器?

来自@Phil建议(使用链接)

 ... this is a directive with controller
angular.directive("addPost", addPost);
addPost.$inject = ["$document", "$log"];
function addPost($document, $log) {
    return {
        ...
        link: link,
        ...
    };
    function link() {
        $document.find('body').on('focus', function (e) {
            $log.debug('HIT ME!');
        });
    }

使用link/postLink函数进行DOM操作。例如

.directive('addPost', ['$document', '$log', function($document, $log) {
    return {
        // snip
        require: 'addPost',
        link: function postLink(scope, element, attr, addPostCtrl) {
            // scope is shared with the controller
            // you can also access properties on the controller itself
            // via addPostCtrl
            $document.find('body').on('focusin', function(e) {
                $log.debug('HIT ME!');
            });
        }
    };
}]);
相关文章：