如何调用由jQuery事件触发的Angular组件内的函数？

我有一个使用jQuery（FineUploader）的第三方组件。 当文档上传时，它会在javascript / jquery中触发一个事件，此时我需要从我的Angular组件之外的jquery代码中调用一个位于我的Angular组件内部的函数。

角度按钮按预期工作，但我无法获得jQuery按钮来成功调用该函数。

这是我的plunker示例代码

HTML页面

        function widgetController() { var model = this; model.addWidget = function(text) { alert(text); } } var app = angular.module("app", []); app.component("widget", { templateUrl: "template.html", controllerAs: "model", controller: [widgetController] });    
  
   

模板页面

  
The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.
 Add widget using Angular     Add widget using jQuery   $(function() { //This is mocking up an event from the third-party component. $("#addJquery").on("click", function(){ model.addWidget("JQUERY WORKED!!"); //I need to be able to call the Angular function from jQuery }); });  

Answer 1

我认为这可能已经成功了，但我不确定是否有更好的答案。 如果有更好的解决方案，请发布备用解决方案。

这是工作的Plunker

HTML页面

           
  
 Add widget using jQuery 
    

模板页面

  
The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.
 Add widget using Angular     Check widget using Angular      
 
 {{w}}