AngularJS: Loading plug-in object inside Service/Controller

By : bms
Source: Stackoverflow.com
Question!

This is regarding the Browser plug-in loading from my angular web application.
I have jquery based web application. Now, I am re-writing some portions(mainly, front end) using Angular framework.
I am facing a problem in loading my custom browser plug-in in my application. Earlier, in Jquery based app, I was using document.getElementById(#objectId) to instanstiate the plug-in object which is declared in main HTML file. It was working well.
But, in angular, i am not able to find proper way to load the plugin object.

Could somebody give some pointers to achieve this ?

Here is my plug-in object declaration in HTML:

<div id="pluginContainer" style="display: none;">
    <object id="myPlugIn" type="application/x-myPluginType" width="0px" height="0px">
        <param name="onload" value="pluginLoaded" />
    </object>
</div>

In Jquery based app:

var pluginObject = document.getElementById('myPlugin');

Thanks, BMS

By : bms


Answers

You can use angular's jQLite to select a DOM element.

You can use these,

$scope.pluginObject = angular.element(document.querySelector('#myPlugin'));

See doc here.

Demo here.

By : devo


You can create a tiny directive and get the element from it. AngularJS makes it really simple. I've created a directive called plugin-object. Please take a look at the code below.

Working Plunkr here (http://plnkr.co/edit/ji5hT95vcDIuwpEcJlVe?p=preview)

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>myApp</title>

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

  <script>

  var myApp = angular.module('myApp', []);


  myApp.directive('pluginObject', [function ($document) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {

        var pluginElement = element;

        var pluginContainer = angular.element('#pluginContainer');

        var justTest = $('#t1');


        pluginElement.bind('click', function(event){
          console.log(event.target);
        });

        pluginContainer.bind('click', function(event){
          console.log(event.target);
        });

        justTest.bind('click', function(event){
          console.log(event.target);
        });


      }
    };
  }])

  </script>

  <style>
    #t1 { border: 2px solid gray; background-color: #f00; }
    #myPlugIn { height: 100px; width: 100px;}
    #pluginContainer { border: 2px solid gray; background-color: blue; width: 200px; margin: 0 auto;}
  </style>

</head>
<body ng-app="myApp">

  <div id="pluginContainer">
      <object id="myPlugIn" plugin-object type="application/x-myPluginType">
          <param name="onload" value="pluginLoaded" />
      </object>
  </div>

  <div id="t1">TEST</div>

</body>
</html>

You could even use jQuery inside the directive as you normally would do - see third option pluginJQueryWay, BUT I wouldn't recommend that as it's not really necessary - the more AngularJS you think and less jQuery it's better. :)

Also make sure you are no trying to instantiate the plugin or bind events to it from the controller - try to keep any DOM manipulation inside the directive (best practice!).

If you get it right directives will simplify your HTML and serve as reusable building blocks across your application that are not depending on any specific controller or $scope. It is a beautiful thing ;)

If you want to bind some event you can use .bind - check code below using the pluginAngularWay2 :

    var pluginAngularWay2 = angular.element('#t1');

    pluginAngularWay2.bind('click', function(event){
      console.log(event.target);
    });

You can of course bind to other events rather than just click .bind('change', function(){...}) and so on.



This video can help you solving your question :)
By: admin