How to add third party Javascript plugin with callback function to Angular JS application

Question

I have to add an third party JavaScript plugin with callback function to an Angular JS application.

The JavaScript plugin provides a function like this:

thirdPartyFunction(parameter1, parameter2, parameter3, callback);

In the callback function I get the result that the plugin calculated.

The callback function looks like this:

callback(resultobject)
{ ... }

I want to display the result in my angular application. How can I get the resultobject in the $scope? It's not possible to rewrite the JavaScript plugin so far.

My idea is to provide a angular service like this one, but how should I implement the service?:

app.factory('myservice', function () {

    function callback(resultobject) {
    ???
    }


    return {

        getResult: function(parameter1, parameter2, parameter3) {
        thirdPartyFunction(parameter1, parameter2, parameter3, callback);
            return ???;
        }

    };
});

Chandermani · Accepted Answer · 2013-03-09 11:31:18Z

1

Service may not help here. Look at angular directives here. Depending on how the plugin is integrated on the page you would have to create a directive that exposes the plugin functionality.

Directives create their own scopes and can broadcast \ emit messages that can be channeled to controllers where you can update the model, on plugin callback and call $scope.apply() which would then refresh the UI

If you can reference the plugin in Controller directly then the only thing you would need to do after the async callback would be to update the model and call $scope.apply()

answered Mar 9, 2013 at 11:31

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark Rajcok Over a year ago

Just FYI, by default (i.e., scope: false) directives do not create a new scope. If you use scope: true, a new scope (that prototypically inherits from the parent scope) is created. If you use scope: { ... }, a new isolate scope (that does not prototypically inherit) is created.

Chris Over a year ago

Thank you for your answer, but directives are executed only once, or not? It should be able, to execute the function "thirdPartyFunction" a number of times after the DOM is loaded. Do you have an idea how to do this?

Chandermani Over a year ago

Directives would be used to wireup event handlers so they need to run only once. Basically its just Javascript, callback method needs to be wired once and would get call every time there is a callback.

Mark Rajcok · Accepted Answer · 2013-03-11 14:49:27Z

First of all, thank you for your reply. Now, here is my solution how to call the function "thirdPartyFunction" whenever you want. Just change a variable in your scope.

app.directive('somePlugin', function() {
return {
  scope: true,
  link: function(scope, element, attrs) {

    function callback(resultObject) {
       scope.model.prop1 = resultObject.propx;
       scope.model.state = "waiting";
       scope.$apply();
    }

    scope.$watch('model.state', function(newValue, oldValue) {
            if (newValue == "request") {
               thirdPartyFunction(scope.model.parameter1, scope.model.parameter2,    
               scope.model.parameter3, callback);
            }
        });

  }
}
});

Mark Rajcok · Accepted Answer · 2013-03-11 14:52:51Z

Let's assume your controller has some model you want the plugin to eventually update:

$scope.model = { prop1: 'plugin will update this value' };

As @Chandermani already suggested, define a directive. In the linking function, define the callback function. When the callback is called, because of the closure we created, it will have access to the directive's scope.

You have quite a bit of freedom with repect to the directive scope. You can use the same scope as the parent (this is what directives do by default) and directly update scope.model.prop1. You can create a new scope (scope: true) and still have access to scope.model.* via prototypal inheritance. You can create an isolate scope (scope: { ... }) and use the '=' syntax to bind a property to the parent scope.

app.directive('somePlugin', function() {
   return {
     scope: true,
     link: function(scope, element, attrs) {
        // define the callback here
        function callback(resultObject) {
           scope.model.prop1 = resultObject.propx;
           scope.$apply();  // let Angular know about the change we just made
        }
        // initialize the plugin here
        thirdPartyFunction(parameter1, parameter2, parameter3, callback);
        // do other directive stuff here
        // ...
     }
   }
});

Collectives™ on Stack Overflow

How to add third party Javascript plugin with callback function to Angular JS application

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related