将事件绑定到角度指令内的 $(document)

2024-03-10

我有一个实现选择框的指令。
现在,当选择框打开并且我单击其外部的某个位置(文档中的任何其他位置)时,我需要它折叠。

这个 JQuery 代码在我的指令中工作,但我想以“有角度的方式”执行它:

  $(document).bind('click', function (e) {
       var $clicked = e.target;
       if (!$clicked.parents().hasClass("myClass")) {
            scope.colapse();
       }
  });

我尝试将 $document 服务注入到我的指令中,但没有成功。


我相信,最真实的 Angular 方式是使用angular.element代替jQuery并访问window.document通过$document服务:

(function() {

  angular.module('myApp').directive('myDocumentClick', 
    ['$window', '$document', '$log',
    function($window, $document, $log) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          $document.bind('click', function(event) {
            $log.info(event);
            if (angular.element(event.target).hasClass('myClass')) {
              $window.alert('Foo!');
            }
          })
        }
      };
    }
  ]);

})();

笨蛋链接 http://plnkr.co/edit/TBdfMLp9mIBhZR9E4wXo?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将事件绑定到角度指令内的 $(document) 的相关文章

随机推荐

  • 如何刷新表中的单行?

    是否可以刷新a的单行vaadin table成分 到目前为止 如果表行编辑完成 我只需刷新整个表 table refreshRowCache 但这可能会导致稍后的大型表出现性能问题 那么 如何刷新单行呢 我在 Vaadin 论坛上发现了这个
  • Array.delete(object) 从数据库中删除?

    所以我试图获取一系列不包含 post 的帖子 令我惊讶的是 下面的代码导致 post 被从数据库中删除 post Post find 2 posts Post where text gt title posts delete post 为什
  • Android onNewIntent() 通知未正确执行

    我有一个用于通知的广播接收器 我的应用程序是一个 webkit 我希望当用户单击通知时打开我的应用程序并定向到某个 URL 一切似乎都工作正常 但我现在遇到了问题 onNewIntent 如果用户上次通过按主页按钮退出应用程序 则调用此方法
  • 相机标定opencv

    你好 我正在做一个项目来进行图像 3D 重建 我正在校准相机的阶段 这需要很长时间才能完成 但是当我编译代码并在相机前显示棋盘时 它会直接进入未处理的异常错误 当图片不在框架中时 一旦进入框架就没有错误 出现未处理的错误我不知道为什么 我问
  • ActiveJob Deliver_later 不发送

    我有以下方法 UserMailer comment alert comment user type deliver later 奇怪的是 它与参数一起出现deliver now在 Rails 日志中 ActiveJob Enqueued A
  • 如何在 Kotlin DSL 中有条件地接受 Gradle 构建扫描插件服务条款?

    这基本上延伸了这个问题 https stackoverflow com q 52636622 1127485使用 Kotlin DSL 而不是 Groovy DSL 如何Groovy DSL 解决方案 https stackoverflow
  • 将 ASP.net Core 2.0 部署到 Azure

    我已通过以下步骤将 ASP net Core 1 1 应用程序升级到 ASP net Core 2 0 将目标框架更改为2 0 升级所有 Nuget 包 现在 我从 git 进行的自动部署运行并显示成功 但应用程序未运行 我收到以下错误 H
  • R,dplyr - group_by()和arrange()的组合不会产生预期的结果?

    使用 dplyr 函数时group by 紧接着arrange 我希望得到数据帧已排序的输出within我所说的组group by 我对文档的阅读是 这种组合应该产生这样的结果 但是当我尝试时 这不是我得到的 并且谷歌搜索并没有表明其他人遇
  • 将 Boost 适配器与 C++11 lambda 结合使用

    我尝试编译这段代码 include
  • 虚拟继承混乱

    我正在阅读有关继承的内容 并且有一个主要问题 我几个小时都无法解决 给定一个类Bar是一个类virtual功能 class Bar virtual void Cook 两者有什么不同 class Foo public Bar virtual
  • CollectionView 内的按钮不可点击

    我在集合视图的自定义单元格中有一个按钮 集合视图位于滚动视图上 由于某种原因 我无法单击该按钮 我已检查我的所有元素是否都启用了用户交互 Here is my layout of the collection I ve hidden som
  • XSLT:通过递增属性和值生成多个对象

    我有一个如下所示的 xml 我想复制 n 次 同时递增其元素之一和属性之一 XML 输入
  • 使用鼻子进行测试的 Python 导入 - 导入当前包之上的模块的最佳实践是什么

    这是一个经常以不同形式被问到的问题 并且经常得到 哈哈 你做得不对 的回答 很确定这是因为人们 包括我 尝试使用一个常识性场景作为实现 并且解决方案并不明显 如果您以前没有这样做过 会接受 让飞出瓶子 的答案 Given project i
  • 为什么Delete既是DDL又是DML语句

    我目前正在阅读 Microsoft 官方书籍 数据库管理基础知识 准备参加考试 我了解 DDL 和 DML 是什么 但 Microsoft 将 DELETE 显示为 DDL 和 DML 语句 我已经用谷歌搜索过这一点 但我无法证实或否认这一
  • 关于weak_ptr的线程安全性

    std shared ptr
  • 使用 Java 进行 AWS S3 文件搜索

    我们使用 java 类从 AWS s3 存储桶下载文件 代码如下 inputStream AWSFileUtil getInputStream AWSConnectionUtil getS3Object null cdn generalse
  • 从 Java 应用程序调用 Servlet

    我想从 Java 应用程序调用 Servlet 问题是 该调用似乎没有到达 Servlet 我没有收到任何错误 但没有到达 Servlet 中的第一个输出 doPost 如果我在网络浏览器中打开 URL 我当然会得到不支持 GET 等错误
  • 如何阻止 dbentityentry.currentvalues.setvalues 尝试更改实体键值

    我正在使用以下代码使用从我的代码收集的新信息来更新实体对象 我在用实体框架5 我使用以下扩展方法 作为我在 EF4 中使用的重新附加代码的替代方法 public static void ApplyValues this object cur
  • 如何强制 WPF 应用程序在管理员模式下运行

    我有一个 WPF 应用程序 可以访问本地计算机上的 Windows 服务 任务计划程序 当我部署此 WPF 应用程序并在没有 以管理员身份运行 的情况下运行它时 它会失败 因为它无法访问本地计算机上的 Windows 服务和任务计划程序 如
  • 将事件绑定到角度指令内的 $(document)

    我有一个实现选择框的指令 现在 当选择框打开并且我单击其外部的某个位置 文档中的任何其他位置 时 我需要它折叠 这个 JQuery 代码在我的指令中工作 但我想以 有角度的方式 执行它 document bind click functio