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

Question

我有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>

Answer 1

在检查$digest是否正在进行之后，您可以尝试在指令中自己消化：

if(!$scope.$$phase) $scope.$digest();
// or $apply ..

希望这可以解决您的问题:)

Answer 2

大多数情况下，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 Docs - ngClick