规范 : angular 组合 jquery plugin

时间:2025-05-01 12:08:08

jquery 会有document.ready ,这是会把model value 给 set 去 jquery ,如果set 不进,可能需要整个渲染(refresh)。在操作时需要找到接口,在找到value。

所以jquery api 必须找到

1. document ready point

2. set view value

3. get view value

4. refresh

5. on change

6. destroy

例子

//没有1 document ready 接口 & 4 refresh 接口
.directive('dtPicker', function () {
return {
require: '?ngModel',
restrict: 'A',
scope: {
viewMode: '@',
format: '@'
},
link: function (scope, element, attrs, ngModel) {
if (element[0]) {
element.datetimepicker({
format: scope.format,
}).on('dp.change', function (e) { //4 on change
var $picker = $(element).data("DateTimePicker");
var date = $picker.date().toDate(); //3 get view value
ngModel.$setViewValue(date);
});
}
var originRender = ngModel.$render;
ngModel.$render = function () {
originRender();
var $picker = element.data("DateTimePicker");
$picker.date(new Date(ngModel.$viewValue)); //2 set view value
}
scope.$on("$destroy", function () {
var $picker = $element.data("DateTimePicker");
$picker.destroy(); //6 destroy
});
}
}
})