AngularJS：在指令外的按钮上侦听单击事件

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

您只需引用按钮并向其附加事件处理程序

例如：

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);
      });
    }
  };
});

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

演示：

请注意，像这样附加的事件处理程序“在Angular之外”存在。这意味着，如果处理程序更新了绑定到视图的范围值，则需要显式地告诉Angular，否则直到下次有东西触发摘要循环时，更改才会反映出来

为此，您可以使用

$apply

：

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

例如：

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);
      });
    }
  };
});

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

---

非常感谢！我非常感激。感谢您上了使用$apply（）函数的一课。上帝保佑，我的朋友。嘿，我尝试了你的建议，效果很好，但只有当我在指令之外的元素上分配了ng click=“”指令时。你知道为什么会这样吗？有没有办法解决这个问题？很难说没有看到你试图做什么的代码。你能在Plunker里复制吗？嘿！它刚刚开始工作！我不知道它是如何工作的，但是没有ng click属性。我一定改变了什么，我真的不知道是什么。我只是在做了一个plunker模型之后才发现：非常感谢，如果我浪费了你的时间，我很抱歉。