Question

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

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

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

1 个答案: