规范 : angular 组合 jquery plugin

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
                });
            }
        }
    })