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.