时间戳

首页 > 解决方案 > 位于组件中的 AngularJS 元素仅在第二次单击后才会触发

javascript - 位于组件中的 AngularJS 元素仅在第二次单击后才会触发

问题描述

我有 AngularJS (1.x) 组件——或者确切地说是指令，并且该指令中的元素仅在第二次单击时才会被触发/工作/操作。

例如：除非您单击两次，否则下拉菜单不会切换。在第二次单击后，切换将在每次下一次单击时出现。

就像元素没有在 DOM 中消化一样。

这是组件调用：

<dropdown-custom-component-example></dropdown-custom-component-example>

这是组件的 html 文件：

<div class="dropdown">
  <a class="btn pl-2" data-toggle="dropdown">
    <i class="icon-options"></i>
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" data-toggle="modal" data-target=".create-supplier">
      <i class="fa icon-plus text-primary"></i>&nbsp;&nbsp;
      Action
    </a>
  </div>
</div>

标签： javascriptangularjsdom

解决方案

大多数时候 AngularJS 没有响应是因为在 Angular 上下文之外发生了一些事情，在这些情况下，尝试使用内置的 AngularJS 指令复制您想要的功能很有用。

访问组件的某些实现会很有用。但是，根据您提供的所有信息，您可以使用ngClick内置指令：

<div class="dropdown">
  <a class="btn pl-2" data-toggle="dropdown">
    <i class="icon-options"></i>
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" data-toggle="modal" data-target=".create-supplier" ng-click="yourFunctionHere(this)">
      <i class="fa icon-plus text-primary"></i>&nbsp;&nbsp;
      Action
    </a>
  </div>
</div>

AngularJS 文档 - ngClick

推荐阅读