我是
angularjs的新手.我正在建造一个angularjs SPA.应用程序页面有两个部分 – 按钮区域和应用程序区域.应用程序区域是我的视图加载的位置.每个视图的按钮区域是相同的,因此我不将它包含在视图模板中,而是将其保留在应用程序窗口中.我的问题是,我希望我加载到应用程序区域的各种指令响应按钮区域中的点击.我如何收听源自指令之外的点击(或任何其他事件)？非常感谢！
解决方法
您只需要引用该按钮并为其附加事件处理程序.
例：
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
});
};
