Question

我目前正在将一个大型应用程序移植到基于HTML5的Web应用程序 - 我已经开始在AngularJS中构建应用程序并享受AngularJS框架的强大功能 - 我目前有一个问题阻碍我：

我有一个指令，它给了我一个jQuery Datepicker，但是对模型的绑定似乎不起作用。

我可能误解了指令的工作方式，并希望看看我能否修补这部分对框架的理解。我已经完成了大量的例子（包括github上的angularui项目，但仍然没有理解为什么没有发生绑定）

任何帮助将不胜感激。

Answer 1

对于谷歌搜索这个问题（就像我一样），使用Angular绑定jQuery UI datepicker的一种更简单的方法就是这样做......

$.datepicker.setDefaults({
    // When a date is selected from the picker
    onSelect: function(newValue) {
        if (window.angular && angular.element)
            // Update the angular model
            angular.element(this).controller("ngModel").$setViewValue(newValue);
    }
});

只需将之前放在您的.datepicker()初始化代码中。

（取自我在此发布的另一个答案：https://stackoverflow.com/a/17206242/195835）

Answer 2

首先，您使用angularjs非常棒，它是一个甜蜜的框架。一个分支项目开始了一段时间，以处理诸如包装jquery-ui和创建ui模块之类的事情。

以下是Peter Bacon Darwin的实施链接。

https://github.com/angular-ui/angular-ui/tree/master/modules/directives/date

- 丹

Answer 3

angular-ui datepicker没有使用Angular 1.0.0，所以我重写了它。我的fork使您能够设置日期在输入中的格式化方式以及如何将其保存回模型。

代码：https://gist.github.com/2967979 jsFiddle：http://jsfiddle.net/m8L8Y/8/（它缺少jquery-ui样式，但效果相同）

// Code inspired by angular-ui https://github.com/angular-ui/angular-ui/blob/master/modules/directives/date/src/date.js
/*
Features:
* via the ui-date attribute:
    * Ability to say how model is parsed into a date object
    * Ability to say how input's value is parsed into a date object
    * Ability to say how a date object is saved to the model
    * Ability to say how a date object is displayed in the input
* via the ui-date-picker attribute
    * Ability to directly configure the jQuery-ui datepicker
*/


angular.module('ui.directives', [])
    .directive('uiDate', function () {
        return {
            require: '?ngModel',
            //scope: {},
            link: function ($scope, element, attrs, ngModel) {
                // Date Handling Functions
                var dateHandler = $.extend({ model: {}, view: {} }, $scope.$eval(attrs.uiDate));

                // This will attempt to use preferredParser to parse a date.
                function defaultDateParse(date, preferredParser) {
                    if (!preferredParser)
                        return new Date(date);
                    return preferredParser(date);
                }

                // This will attempt to use preferredFormatter to format a date, otherwise use 'mm/dd/yy'.
                function defaultDateFormatter(date, preferredFormatter) {
                    if (!preferredFormatter)
                        preferredFormatter = "mm/dd/yy";

                    if (typeof preferredFormatter == 'string')
                        return $.datepicker.formatDate(preferredFormatter, date);
                    else
                        return preferredFormatter(date);
                }

                // Functions for Parsing & Formatting on the Model & View
                function parseDateFromModel(date) {
                    return defaultDateParse(date, dateHandler.model.parse)
                }
                function parseDateFromView(date) {
                    return defaultDateParse(date, dateHandler.view.parse)
                }
                function formatDateForModel(date) {
                    return defaultDateFormatter(date, dateHandler.model.format)
                }
                function formatDateForView(date) {
                    return defaultDateFormatter(date, dateHandler.view.format)
                }

                var defaultDateViewFormat = (
                    typeof dateHandler.view.format == 'string'
                    ? dateHandler.view.format
                    : 'mm/dd/yy'
                )

                // Initialize the jQuery-ui datePicker
                var datePickerSettings = $.extend({ dateFormat: defaultDateViewFormat }, $scope.$eval(attrs.uiDatePicker))
                var oldOnSelect = datePickerSettings.onSelect;
                datePickerSettings.onSelect = function (dateVal) {
                    $scope.$apply(function () {
                        element.focus().val(dateVal);
                        updateModel();
                    })
                    if (oldOnSelect)
                        oldOnSelect.apply(this, arguments)
                }

                element.datepicker(datePickerSettings);

                if (ngModel) {
                    // Specify how UI should be updated
                    ngModel.$render = function () {
                        element.val(ngModel.$viewValue || '');
                    };

                    // Listen for change events to enable binding
                    element.bind('blur keyup change', function () {
                        $scope.$apply(updateModel);
                    });

                    // Write data to the model
                    function updateModel() {
                        ngModel.$setViewValue(element.val());
                    }

                    // Convert the model into a string value
                    ngModel.$formatters.push(function (v) {
                        if (v != "" && v != null)
                            return formatDateForView(parseDateFromModel(v));
                        return null;
                    });

                    // Convert the string value into the model
                    ngModel.$parsers.push(function (v) {
                        if (v != "" && v != null)
                            return formatDateForModel(parseDateFromView(v))
                        return null;
                    });
                }

            }
        };
    })

Answer 4

与praveepd类似（使用它们作为基础），但这将包括深度模型选择。

http://jsfiddle.net/c8PMa/

var myApp = angular.module('myApp', ['myApp.directives']);

function MainCtrl($scope) {

    $scope.deepValue = {
        fromDate: null,
        toDate: null
    }

}

angular.module('myApp.directives', [])
  .directive('myDatepicker', function() {
    return function(scope, element, attrs) {     

       element.datepicker({
         changeYear : true,
         changeMonth : true,
         appendText : '(yyyy-mm-dd)',
         dateFormat : 'yy-mm-dd', 
                onSelect: function(dateText) {                    
                    var mdlAttr = $(this).attr('ng-model').split(".");

                    if (mdlAttr.length > 1) {

                        var objAttr = mdlAttr[mdlAttr.length-1];
                        var s = scope[mdlAttr[0]];

                        for (var i=0; i < mdlAttr.length-2; i++) {
                            s = s[mdlAttr[i]];
                        }

                        s[objAttr] = dateText;
                    } else {
                        scope[mdlAttr[0]] = dateText;
                    }

                    scope.$apply();
                }                
        });

    }
});

Answer 5

http://jsfiddle.net/9BRNf/74/这是解决方案：）

代码：

     var myApp = angular.module('myApp', ['myApp.directives']);


    function MainCtrl() {

    }

    angular.module('myApp.directives', [])
      .directive('myDatepicker', function() {
          return {
             require: '?ngModel',
                link: function (scope, element, attrs, ngModelCtrl) {
          element.datepicker({
             changeYear : true,
             changeMonth : true,
             appendText : '(yyyy-mm-dd)',
             dateFormat : 'yy-mm-dd',
              onSelect: function(date) {
                  ngModelCtrl.$setViewValue(date);
                            scope.$apply();
              }
          });
        }
      }

  });

Answer 6

我刚刚修改了代码，看看这个：http://jsfiddle.net/YU5mV/

<强> HTML

<input id="date1" value="1/1/1980"  ng-model="fromDate" my-datepicker />
<input id="date2" value="1/1/1980" ng-model="toDate" my-datepicker />

<强>的JavaScript

angular.module('myApp.directives', [])
  .directive('myDatepicker', function() {
    return function(scope, element, attrs) {     

       element.datepicker({
         changeYear : true,
         changeMonth : true,
         appendText : '(yyyy-mm-dd)',
         dateFormat : 'yy-mm-dd', 
            onSelect: function(dateText) {                    
                var mdlAttr = $(this).attr('ng-model');
                scope[mdlAttr] = dateText;                    
                scope.$apply();                                                   
            }                
        });

    }
  });

Answer 7

老问题，但这是我在谷歌搜索中的第一个打击。无论如何，我使用jquery和angular指令一起工作的双日期采集器，所以我想我会分享帮助其他人尝试这样做。

以下是它的掠夺者：

http://plnkr.co/edit/veEmtCM3ZnQAhGTn5EGy?p=preview

基本上它使用json初始化表单。 datepickers有自己的条件，如mindate's等。第一个选择框如果为true =在日历上禁用星期日，否则启用它们。

单击“完成”时，viewmodel获取更新。以下是其中一个日期选择器的代码：

<强> HTML

<input id="StartDate" data-ng-model="viewModel.startdate" date-from />

<强>指令：

app.directive('dateFrom', function() {
    return function (scope, element, attrs) {
        var doDate = $('#EndDate');
        element.datepicker({
          dateFormat: 'dd-M-yy', showOtherMonths: true, 
          selectOtherMonths: true, minDate: '0',
          beforeShowDay: function (date) {
              var day = date.getDay();
              console.log(scope.nosunday);
              if (scope.nosunday === 'true') return [(day !== 0), '']; // disable sundays
              else return [true, ''];
          },
          onSelect: function (selectedDate) {
              var toDate = new Date(element.datepicker("getDate"));
              toDate.setDate(toDate.getDate() + 1);
              doDate.datepicker('option', 'minDate', toDate);
              scope.viewModel.startdate = selectedDate;
              scope.viewModel.enddate = doDate.val();
          }
        });
    }
})

随意进一步优化它。如果你这样做，用分叉的插件发表评论

AngularJS - jQuery UI - 绑定问题

7 个答案: