Как вызвать функцию внутри компонента Angular, вызванного событиями jQuery?

У меня есть сторонний компонент, который использует jQuery (FineUploader). Когда документ загружается, он запускает событие в javascript/jquery, и мне нужно в этот момент вызвать функцию, которая находится внутри моего компонента Angular, из кода jQuery, который находится за пределами моего компонента Angular.

Кнопка Angular работает так, как ожидалось, но я не могу заставить кнопку jQuery успешно вызывать функцию.

Здесь мой пример кода плункера

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>

Ответы

Ответ 1

Я думаю, что это могло сделать трюк, но я не уверен, есть ли лучший ответ. Пожалуйста, напишите альтернативное решение, если есть лучший.

Здесь работает 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>