How to call a function inside an Angular component triggered by jQuery events?

Question

I have a third-party component that using jQuery (FineUploader). When a document gets uploaded, it fires an event in javascript/jquery and I need to, at that point, call a function that is inside my Angular component from the jquery code that is outside my Angular component.

The angular button works as expected but I can't get the jQuery button to call the function successfully.

Here's my plunker example code

HTML Page

<!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>

Template Page

<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>

RichC · Accepted Answer · 2017-02-09 16:37:53Z

I think this may have done the trick but I'm not sure if there is a better answer. Please post an alternate solution if there is a better one.

Here's the working Plunker

HTML Page

<!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>

Template Page

<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>

Collectives™ on Stack Overflow

How to call a function inside an Angular component triggered by jQuery events?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related