使用 jQuery 插件的基本过程通常是为它创建一个指令。在link
回调中初始化插件。在这里,您可以访问作为 jQuery 或 jQ-lite 对象、角度范围和插件回调的元素。$.apply()
在第三方代码中更改范围时,请参阅有关使用的重要注释
示例 html:
<input my-picker type="text"/>
基本脚本大纲:
app.directive('myPicker', function ($timeout) {
return {
link: function (scope, elem, attrs) {
$timeout(function () {
/* elem is a jQuery or jQ-lite object representing the element*/
elem.daterangepicker({
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
/* not overly familiar with this plugin but this callback
should allow you to set angular scopes */
function (start, end) {
/* important to do any scope changes within `$.apply()` so angular
becomes aware of changes from third party code*/
scope.$apply(function(){
/* do what you need here with angular scope
have access to plugin data as well as angular scope*/
})
});
}, 1)
}
}
})
您可以通过向标记添加其他属性然后使用这些属性来设置各种插件选项来增强此指令。