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

例：

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() is used to execute an expression in angular from outside of
the angular framework. (For example from browser DOM events,
setTimeout,XHR or third party libraries). Because we are calling into
the angular framework we need to perform proper scope life cycle of
exception handling,executing watches.

例：

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