AngularJS：监听指令外按钮的点击事件答案

【问题标题】：AngularJS : Listen for click events on a button outside of a directiveAngularJS：监听指令外按钮的点击事件
【发布时间】：2014-05-24 16:22:06
【问题描述】：

我是 angularjs 的新手。我正在构建一个 angularjs SPA。应用程序页面有两个部分 - 按钮区域和应用程序区域。应用程序区域是加载我的视图的地方。每个视图的按钮区域都是相同的，因此我没有将其包含在视图模板中，而是将其保留在应用程序窗口中。我的问题是我希望加载到应用程序区域中的各种指令来响应按钮区域中的点击。如何收听源自指令之外的点击（或任何其他事件）？非常感谢！

【问题讨论】：

标签： angularjs events directive jqlite

【解决方案1】：

您只需要引用按钮并将事件处理程序附加到它。

例子：

app.directive('directiveName', function () {

  return {
    link: function (scope, element, attrs) {

      // Get a reference to the button DOM element
      var buttonDOMElement = document.querySelector('#button1');

      // Wrap it as a jqLite element
      var button = angular.element(domElement);

      var onButtonClick = function () {
        // Do something
      };

      button.on('click', onButtonClick);

      scope.$on('$destroy', function () {
        button.off('click', onButtonClick);
      });
    }
  };
});

演示： http://plnkr.co/edit/4XvPT8r9USWHnbdu1ZHX?p=preview

请注意，像这样附加的事件处理程序存在于“Angular 之外”。这意味着，如果您的处理程序更新了例如绑定到视图的范围值，您需要明确告诉 Angular，否则更改将不会在下次触发摘要循环时才反映。

为此，您可以使用$apply：

$apply() 用于从外部以角度执行表达式角度框架。（例如来自浏览器 DOM 事件， setTimeout、XHR 或第三方库）。因为我们正在呼唤我们需要执行适当的范围生命周期的角度框架异常处理，执行手表。

例子：

var onButtonClick = function () {
  scope.$apply(function () {
    // Do something
  });
};

【讨论】：

非常感谢！我非常欣赏这一点。感谢您学习如何使用 $apply() 函数。上帝保佑，我的朋友。
嘿，我尝试了你的建议并且效果很好，但只有当我在指令之外的元素上分配 ng-click="" 指令时。你知道为什么会这样吗？有没有办法解决它？
很难说没有看到你正在尝试做的代码。你能在 Plunker 中复制它吗？
嘿！它刚刚开始工作！我不知道如何，但没有 ng-click 属性它可以工作。我一定是改变了什么，我真的不知道是什么。我只是在做了一个 plunker 模型后才发现：plnkr.co/edit/2KRDp6gPcT5wtWe7eQJY?p=info 非常感谢，如果我浪费了你的时间，我很抱歉。