Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Javascript / Jquery

How To Call A Function Inside An Angular Component Triggered By Jquery Events?

Post a Comment
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 functio

Solution 1:

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><scriptdata-require="angular.js@1.5.8"data-semver="1.5.8"src="https://code.angularjs.org/1.5.8/angular.js"></script><scriptdata-require="jquery@1.11.3"data-semver="1.11.3"src="https://code.jquery.com/jquery-1.11.3.js"></script><linkhref="style.css" /><scriptsrc="script.js"></script><script>var externalWidget;

    functionwidgetController($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><divng-app="app"id="ngApp"><widget></widget><br /><center><buttonid="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><buttonid="addAngular"ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button>&nbsp;&nbsp;&nbsp;<buttonid="checkAngular"ng-click='model.checkWidget()'>Check widget using Angular</button>&nbsp;&nbsp;&nbsp;</center><ul><ling-repeat="w in model.factory.widgets">
  {{w}}
</li></ul>

Post a Comment for "How To Call A Function Inside An Angular Component Triggered By Jquery Events?"