Angularjs指令在link函数中没有响应事件绑定

angularjs directive not responding to event binding in link function

本文关键字：响应 事件 绑定 指令 link 函数 Angularjs      更新时间：2023-09-26

这是指。

我有两个简单的元素(restrict: "E")指令，incButtonOne和incButtonTwo，跟踪并显示它被点击的次数。它们都实现本地控制器并具有隔离作用域。这两个指令完成了同样的事情，但实现略有不同:

  • incButtonOne的模板在标签中包含一个ng-click指令，通过调用该指令的控制器
    • 中的函数来方便点击计数。
  • incButtonTwo实现了link函数来注册一个click事件处理器，该处理器调用指令控制器
    • 中的递增函数。

他们都工作。种。问题是incButtonTwo的显示值仅在incButtonOne被单击后更新，即值实际上是更新的(这可以通过取消第45行alert语句的注释来确认)，但直到执行一些其他操作才显示。

我只是想了解为什么会发生这种情况以及如何解决它。谢谢!

正如Stanislav Demydiuk所说，您必须使用$apply()来更新绑定。使用你的"increment"函数，你得到的结果如下:

element.on("click", function() {
     scope.$apply(increment);
});

注意:在您的示例中，如果单击第一个按钮使您的第二个按钮更新，这是因为ng-click事件，该事件被包装在$scope.$apply()中(参见本文)。

当您手动注册事件处理程序时，您必须像这样手动调用scope.$apply()函数

link: function(scope, element) {
  element.on('click', function() {
     scope.$apply(function() {
        scope.count++;
     });
  });
}
相关文章：