什么是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一樣。 所以“元素”就像“$（'你的選擇器'）”。