我正在通过angular.bootstrapping它使用Angular模块将一个非角度网页转换为Angular版本。除了需要与页面的其他部分进行通信之外,它工作得很好。不幸的是,我现在无法将页面的其余部分转换为Angular。
到目前为止,我想要做的最好的方法是在bootstrapped元素上触发包含我需要通信的信息的vanilla JS事件。
是否有确定的模式或更好的方法?
答案 0 :(得分:8)
如果您需要从vanilla javascript向AngularJS控制器发送消息,您可以像这样访问范围:
var ngScope = angular.element('[ng-controller]').scope();
// or choose a more appropriate selector...
然后,您可以在范围内执行任何操作,例如广播事件或甚至只调用函数:
ngScope.$broadcast('myEvent');
ngScope.$apply(ngScope.controllerFunction());
从Angular向vanilla javascript发送消息应该更加简单。只需调用全局事件或只访问全局函数/属性。
答案 1 :(得分:4)
当我开始将项目迁移到Angular时,我遇到了同样的问题。我必须通过我的非角度应用程序与不同类型的事件进行沟通,例如点击。如果您想使用已知的设计模式,可以使用Mediator pattern
。这是基于publish/subscribe
的通信。您可以拥有介体的单例全局实例,并从角度和非角度应用程序
这是lib的链接:http://thejacklawson.com/Mediator.js/
在您的应用(两者都)加载之前,您可以执行以下操作:
window.mediator = new Mediator();
稍后您可以在Angular应用中获得如下服务:
angular.module()
.service('mediator', function() {
var mediator = window.mediator || new Mediator();
return mediator;
});
从您的非角度应用中,您可以做到:
mediator.subscribe('something', function(data){ ... });
从您的Angular控制器或您拥有的任何内容中,您将注入所创建的mediator
服务并使用它,如下所示:
mediator.publish('something', { data: 'Some data' });
现在,您的应用之间有Angular
和非Angular方式进行通信。
这个解决方案给我带来了奇迹,我希望它对你也有所帮助。
让我知道,干杯!
答案 2 :(得分:1)
$on
只会监听角色事件,例如$braodcast
&仅$emit
,它们仅在引导的应用模块中工作。
如果您想要监听jQuery事件,那么它应该使用.on
/ .bind
,就像我们在jquery中所做的那样$('selector').on('event',function(){});
如果多个事件与单个DOM元素相关联,那么更喜欢Directive将是跟踪元素事件的更好方式。
<强>指令:强>
app.directive('myCustomer', function() {
return {
restrict: 'E',
compile: function(element,attrs){
element.on('click focus blur',function(){
//code here
});
}
};
});
否则你可以在特定元素上绑定事件监听器,然后你可以使用jQLite
,$document
,$window
帮助$element
来绑定它(提供控制器级元素)依赖。
<强>控制器强>
$document.find('.myClass').on('click',function(e){ //placing on specific element.
//code here
});
希望这可以帮助你,谢谢。