AngularJS的等效物是什么jQuery插件？

Question

背景

我创建了一个名为shotgun的节点模块和另一个名为shotgun-client的模块，当它们结合在一起时，在浏览器中提供了一个基于节点的实时终端API。客户端库允许用户创建一个shotgun.ClientShell实例并公开与服务器交互的API。这个clientShell实例只是一个带有方法的API，这意味着用户必须完成创建使用该API的接口的所有工作。

我想为用户提供一个快捷方式，所以我创建了这个很棒的JQuery插件，它作为clientShell对象的包装器，并为用户创建一个简单的HTML终端界面。

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

JQuery插件执行以下操作...

1. 创建一堆元素，并将它们插入到调用插件的元素中，这将是#console，如果像这样调用：

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

2. 实例化shotgun.ClientShell API的一个实例。

   var clientShell = new shotgun.ClientShell(options);

3. 设置事件处理程序，将用户操作与clientShell API调用绑定在一起。

我的问题

我是AngularJS的新手，我想知道如何将一个JQuery插件像这个转换成一个AngularJS指令。实际上，我想做到这一点：

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

我希望那个div能够转换成与我的JQuery插件创建的相同HTML终端。但我真的很困惑如何将其打包，以便可以作为“Angular适配器”与我的“JQuery适配器”一起使用。JQuery插件很容易，几乎完全包含在一个函数中...

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

…但我不知道如何创建一个简单的脚本来完成相同的任务，并且可以像 JQuery 插件一样轻松地添加到某个人现有的 Angular 应用程序中。

- Chev

Answer 1

在Angular中，处理这样的事情的方式是使用指令(directives)。下面是一个指令的示例，用于连接自定义的基于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>

- aemxdp

---

这是一个非常完整的答案，附带了一个优秀的示例。谢谢！ - Chev

Answer 2

转换插件为指令非常简单。以下是一个基本示例，假设您的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);
            });
        }
    };
});

- TheSharpieOne

---

哦，有趣，直接在指令中使用实际的JQuery插件。我原本打算从头编写指令，让用户包含他们想要的任何适配器。但也许我会将它们都包含在捆绑脚本中，并做一个非常轻量级的包装器。这样可以将控制台的界面保持在一个地方，而不必修改两个适配器，但这也意味着用户需要在页面上安装JQuery，即使他们只想要Angular适配器。我会告诉你我选择了什么 :) - Chev

只是一点小提示，AngularJS建议在页面上包含jQuery，并在AngularJS之前加载。这更像是“可以省略”的而不是“必须包含”的。这是一种乐观的态度哈哈。 - TheSharpieOne

好的，我知道如果你在页面上没有包含它，Angular会退而使用一个内部实现的JQuery lite。然而，我不认为这个lite版本包括插件功能，所以在这种情况下，必须包含JQuery才能使用插件。 - Chev

Answer 3

你需要的是一个指令。

假设你的Angular应用程序被分配给“app”：

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

在 Angular 指令中使用链接函数 (link function) 可以让你像使用 jQuery 一样访问元素。因此，“element”就像是“$('your-selector')”。

- Greg Pike