How to call third-party plug-in libraries in AngularJs and third-party libraries in angularjs

How to call third-party plug-in libraries in AngularJs and third-party libraries in angularjs

In AngularJs, we will inevitably use third-party libraries, such as the jquery plug-in library. We cannot introduce these libraries in AngularJS, for example, in controller. So how should we use third-party libraries in Angular?

How to use it?

It's easy to write a direve VE for the plug-in.

Here, I will use a simple jquery plug-in Toolbar. js DEMO.

This is how we create a tooltip in jquery:

<!-- Click this to see a toolbar --> <div id="format-toolbar" class="settings-button">    </div>   <!-- Our tooltip style toolbar --> <div id="format-toolbar-options">   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="icon-align-left"></i></a>   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="icon-align-center"></i></a>   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="icon-align-right"></i></a> </div> 

<!-- Typical jQuery plugin invocation --> $('#format-toolbar').toolbar({   content: '#format-toolbar-options',    position: 'left' }); 

Use in Angular

Here we customize an element attribute 'toolbar-tip '-- This enables Angular ctive ve to be written. Let's rewrite the html:

<div id="format-toolbar1" class="settings-button" toolbar-tip="{content: '#format-toolbar-options', position: 'top'}">    </div> 

Note that we write all the options in the toolbar to html, so that we can use the same direve VE in any place.
Finally:

<script> var App = angular.module('Toolbar', []);   App.directive('toolbarTip', function() {   return {     // Restrict it to be an attribute in this case     restrict: 'A',     // responsible for registering DOM listeners as well as updating the DOM     link: function(scope, element, attrs) {       $(element).toolbar(scope.$eval(attrs.toolbarTip));     }   }; }); </script> 

In this way, you can easily reference third-party plug-ins in Angular.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.