5

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

4

1 回答 1

8

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

例子：

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() 用于从 Angular 框架外部执行 Angular 表达式。（例如来自浏览器 DOM 事件、setTimeout、XHR 或第三方库）。因为我们正在调用 Angular 框架，所以我们需要执行适当的异常处理范围生命周期，执行 watch。

例子：

var onButtonClick = function () {
  scope.$apply(function () {
    // Do something
  });
};
于 2014-05-24T17:52:42.353 回答