Geek asks and answers

What is the equivalent of AngularJS jQuery plugin?

Background

I created a node module called shotgun and the other a shotgun-client , which when combined provides a real-time node API in the browser. The client library allows the user to instantiate shotgun.ClientShelland provides an API for communicating with the server. This instance clientShellis just an API with its methods, which means that the user has to do all the work of creating an interface that uses this API.

I wanted to give the user a shortcut, so I created this awesome jQuery plugin that acts like a wrapper for an object clientShelland creates a simple HTML terminal interface for the user.

Demo: http://codetunnel.com/demos/shotgun

The jQuery plugin does the following ...

  • Creates a bunch of elements and inserts them into the element that the plugin was called on, which will be #consoleif it was called as follows:

    $ ('# console') shotgunConsole () ;.

  • Creates an instance of the API shotgun.ClientShell.

    var clientShell = new shotgun.ClientShell (parameters);

  • Sets event handlers to bind user actions to API calls clientShell.

My question

I'm new to AngularJS, and I'm curious how I would include a JQuery plugin, like this one, in the AngularJS directive. Essentially, I would like to do this:

<div ng-shotgun-console></div>

, div HTML-, JQuery. , , "Angular Adapter" "JQuery Adapter". JQuery ...

$.fn.shotgunConsole = function (options) { ... };

... , script, , - Angular , JQuery.

+3
3

Angular . jquery:

angular
    .module('ng-button-autocomplete', [])
    .directive('ngButtonAutocomplete', function () { return {
        restrict: 'AE',
        replace: true,
        template: '<div><input type="text"><button type="button" class="btn"><i class="icon-search"></i></button></div>',
        scope: {
            source: '&',
            value: '='
        },
        link: function ($scope, $elem, $attr) {
            var input = $($elem.children()[0]),
                button = $($elem.children()[1]);
            $scope.$watch('value', function (val) {
                input.val(val);
            });
            input.autocomplete({
                source: $scope.source(),
                select: function (event, ui) {
                    $scope.$apply(function () {
                        $scope.value = ui.item.value;
                    });
                },
                close: function () {
                    input.autocomplete('option', 'minLength', 9999);
                },
                minLength: 9999
            });
            button.click(function () {
                input.autocomplete('option', 'minLength', 0);
                input.autocomplete('search', input.val());
            });
        }
    };});

:

var app = angular.module('myApp', ['ng-button-autocomplete']);

app.controller('MyCtrl', function ($scope) {
    $scope.xs = ['abc', 'acd', 'bcd'];
    $scope.x = 123;
});

html, :

<div ng-button-autocomplete data-source="xs" data-value="x"></div>
+4

. , , jQuery .

HTML:

<div shotgun-console="options"></div>

:

$scope.options = {
    // ... some options
}


.directive('shotgunConsole',function(){
    return {
        scope: {
            shotgunConsole: "="
        },
        link: function(scope, elm, attrs){
            $(elm).shotgunConsole(scope.options);
            scope.$watch('options',function(newOptions){
                // something to update the options
                $(elm).shotgunConsole(newOptions);
            });
        }
    };
});
+1

You need directive .

Assuming your Angular app is assigned an “app”:

app.directive('ngShotgunConsole', ['injectedDependency',
    function(injectedDependency) {
        return {
            restrict: 'A',
            templateUrl: '/path/to/filename.html',
            scope: true,
            link: function(scope, element, attrs) {
                element.shotgunConsole();
            }
        }
    }
])

Using the link function in the Angular directive gives you access to the element as if you were using jQuery. So, "element" is like "$ (" your-selector ")".

-1
source

More articles:


All Articles