jQueryイベントによってトリガされるAngularコンポーネント内の関数を呼び出す方法は？

jQuery（FineUploader）を使用しているサードパーティのコンポーネントがあります。ドキュメントがアップロードされると、javascript/jqueryでイベントが発生し、その時点で、Angularコンポーネントの外側にあるjqueryコードのAngularコンポーネント内にある関数を呼び出す必要があります。jQueryイベントによってトリガされるAngularコンポーネント内の関数を呼び出す方法は？

角度ボタンは期待通りに機能しますが、関数を正常に呼び出すためにjQueryボタンを取得できません。

Here's my plunker example code

HTMLページ

<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script> 
    <script data-require="[email protected]" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 

    <script> 
    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] 
    }); 

    </script> 

</head> 

<body> 
    <div ng-app="app"> 
    <widget></widget> 
    </div> 
</body> 

</html>

テンプレートページ

<center> 

    <p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p> 

    <button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button> &nbsp;&nbsp;&nbsp; 

    <button id="addJquery">Add widget using jQuery</button> 

</center> 

<script> 
    $(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 
    }); 
    }); 
</script>

出典

2017-02-08 RichC

私は、これはトリックを行っているかもしれないと思うが、私はよりよいがあるかどうかわかりません回答。より良い方法があれば、代わりの解決策を投稿してください。

Here's the working Plunker

HTMLページ

<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script> 
    <script data-require="[email protected]" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 

    <script> 
    var externalWidget; 

    function widgetController($scope, WidgetFactory) { 
     var model = this; 
     model.factory = WidgetFactory; 

     model.addWidget = function(text, isUpdatedExternally) { 
     model.isUpdated = text; 
     var newWidget = text; 
     model.factory.widgets.push(newWidget); 
     if(isUpdatedExternally) 
     { 
      $scope.$apply(); 
     } 
     console.log("updated!"); 
     } 
     model.checkWidget = function() { 
     console.log(model.isUpdated); 
     } 

     model.isUpdated = "NOT UPDATED"; 
     model.addWidget("Controller initialized Widget"); 

     externalWidget = model; 
     console.log(externalWidget); 
    } 


    var app = angular.module("app", []); 

    app.factory('WidgetFactory', function() { 
     var widgetList = []; 
     var initialWidget = "Factory Initialized Widget"; 
     widgetList.push(initialWidget); 

      return { 
       widgets: widgetList 
      }; 
     }); 

    app.component("widget", { 
     templateUrl: "template.html", 
     controllerAs: "model", 
     controller: ["$scope", "WidgetFactory", widgetController] 
    }); 

    </script> 

</head> 

<body> 
    <div ng-app="app" id="ngApp"> 
    <widget></widget> 
    <br /> 
    <center><button id="addJquery">Add widget using jQuery</button></center> 
    </div> 

<script> 
    $(function() { 
    //This is mocking up an event from the third-party component. 
    $("#addJquery").on("click", function(){ 
     externalWidget.addWidget("JQUERY WORKED!!!", true); 
    }); 
    }); 
</script> 

</body> 

</html>

テンプレートページ

<center> 

    <p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p> 

    <button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button> &nbsp;&nbsp;&nbsp; 
    <button id="checkAngular" ng-click='model.checkWidget()'>Check widget using Angular</button> &nbsp;&nbsp;&nbsp; 


</center> 

<ul> 
<li ng-repeat="w in model.factory.widgets"> 
    {{w}} 
</li> 
</ul>

出典

2017-02-09 16:37:53 RichC

jQueryイベントによってトリガされるAngularコンポーネント内の関数を呼び出す方法は？

答えて

関連する問題