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

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