Question

背景

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

我想给用户一个快捷方式，所以我创建了this awesome JQuery plugin作为clientShell对象的包装器，并为用户创建了一个简单的HTML终端界面。

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

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

创建一堆元素并将它们插入调用插件的元素中，如果它被调用，则调用该元素为#console：

$（ '＃控制台'）shotgunConsole（）;
实例化shotgun.ClientShell API的实例。

var clientShell = new shotgun.ClientShell（options）;
设置事件处理程序，将用户操作与clientShell API调用联系起来。

我的问题

我是AngularJS的新手，我很好奇如何将像这样的JQuery插件转换为AngularJS指令。基本上我想这样做：

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

然后我希望div转换为我的JQuery插件创建的同一个HTML终端。我真的很困惑我如何打包它，所以它可以作为“角度适配器”包含在我的“JQuery适配器”旁边。 JQuery插件很简单，几乎完全包含在一个函数中......

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

...但我无法弄清楚如何创建一个简单的脚本来执行相同的操作，并且可以像JQuery插件一样轻松地放入某人现有的Angular应用程序中。

Answer 1

像这样的事情的角度方式是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>

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

您需要的是directive。

假设您的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一样访问元素。所以“元素”就像“$（'你的选择器'）”。

什么是AngularJS相当于JQuery插件？

背景

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

我的问题

3 个答案: