什么是AngularJS相当于JQuery插件？

Question

背景

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

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

演示： http ： //codetunnel.com/demos/shotgun

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

1. 创建一堆元素并将它们插入调用插件的元素中，如果像这样调用它将是#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终端。 我真的很困惑我如何打包它，所以它可以作为“角度适配器”包含在我的“JQuery适配器”旁边。 JQuery插件很简单，几乎完全包含在一个函数中......

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

...但我无法弄清楚如何创建一个简单的脚本来完成同样的事情，并且很容易被放到某人现有的Angular应用程序中，与JQuery插件一样容易。

Answer 1

像这样的事物的角度方式是指令 。 以下是连接自定义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>

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);
            });
        }
    };
});

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指令中的链接函数可以访问元素，就像使用jQuery一样。 所以“元素”就像“$（'你的选择器'）”。