AngularJS虽然很方便，但它无法直接使用jQuery过去积累的大量库的缺点。当然，如果有AngularJS模块作为包装器就好了，但实际上并不总是存在，而且也不一定支持所有功能，因此经常需要自己编写或修改现有库。

然而，每次写类似的代码都很麻烦，而且考虑和记住规范也很麻烦。因此，我写了一个名为Angular jQuery包装器的通用包装器。

当将模式作为JavaScript对象传递，并采用DDD（领域驱动设计）的变形设计，它会自动生成AngularJS指令。因此，它不支持任意的jQuery插件，只支持支持的插件，但还可以轻松添加其他插件。

目前可用的只有jQuery UI的所有小部件和jQuery MultiDatePicker。未来，我们还希望添加bootstrap系列插件等。

GitHub:
https://github.com/norami/angular-jquery-wrapper
演示：
http://norami.github.io/angular-jquery-wrapper/
Bower:
bower 安装 angular-jquery-wrapper

用法

安装

安装 angular-jquery-wrapper 。

标题 (Biaoti)

大概是这个样子。通常只加载必要的插件。

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="lib/multidatespickr/jquery-ui.multidatespicker.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-jquery-wrapper/dist/angular-jquery-wrapper-core.js"></script>
<script src="bower_components/angular-jquery-wrapper/dist/multidatespicker.js"></script>
<script src="bower_components/angular-jquery-wrapper/dist/jquery-ui.js"></script>

指令

jqw-{插件名称}

我声明使用该插件。

jqw-插件名-选项名=”{angular 表达式}”

将angular样式绑定到选项中。对于可变选项，将采用双向绑定。

setter: $(selector).{plugin-name}("option", "{OptionName}", value);
getter: $(selector).{plugin-name}("option", "{OptionName}");

jqw-插件名-字段名=”{angular表达式}”

将Angular式绑定到以下字段。对于可变字段，将实现双向绑定。

setter: $(selector).{plugin_name}("set{FieldName}", value);
getter: $(selector).{plugin_name}("get{FieldName}");

例1：jqw-datepicker-date将datepicker选择的值绑定为Date对象。

例2: jqw-multidatespicker-list会将可选的值列表绑定为Date对象数组（这个功能在标准的jQuery multiDatePicker中不存在）。

jqw-{plugin_name}-{event_name}=”{angular_expression}” 可以换成以下中文表达方式：
「jqw-{插件名称}-{事件名称}=”{Angular表达式}”」

将Angular表达式绑定到事件。Angular表达式必须是可调用的函数。

$(selector).on("{plugin_name}{event_name}", function(event, ui){
    {angular_expression}(event, ui);
})

使用的技术

用AngularJS，将作为属性提供的任意Angular表达式进行双向绑定。