8

私は現在、大規模なアプリケーションを HTML5 ベースの Web アプリに移植しています。AngularJS でアプリの構築を開始し、AngularJS フレームワークの力を楽しんでいます。現在、1 つの問題が立ちはだかっています。

jQuery Datepicker を提供するディレクティブがありますが、モデルへのバインディングが機能していないようです。

http://jsfiddle.net/9BRNf/

私はおそらくディレクティブが機能する方法を誤解しており、フレームワークの理解のこの部分にパッチを当てることができるかどうかを確認したいと考えています. 私はたくさんの例を見てきました(githubのangularuiプロジェクトを含みますが、バインディングが発生しない理由をまだ理解していません)

どんな援助でも大歓迎です。

4

7 に答える 7

4

まず、素晴らしいフレームワークである angularjs を使用していることは素晴らしいことです。jquery-ui のラッピングや ui モジュールの作成などに対処するために、しばらく前に分派プロジェクトが開始されました。

以下は、Peter Bacon Darwin の実装へのリンクです。

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

――段

于 2012-05-24T18:41:37.513 に答える
2

angle-uidatepickerはAngular1.0.0で動作していなかったので、書き直しました。私のフォークを使用すると、入力内で日付をフォーマットする方法と、モデルに保存する方法を設定できます。

コード: 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;
                    });
                }

            }
        };
    })
于 2012-06-22T01:02:01.563 に答える
2

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

    }
});​
于 2012-08-28T21:08:45.977 に答える
1

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

  });
于 2013-09-16T12:36:10.623 に答える
0

コードをトリミングしたところです。これを見てください: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();                                                   
            }                
        });

    }
  });
于 2012-07-25T09:19:13.420 に答える