Jquery ui AngularJS-jQuery UI-绑定问题

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

我有一个指令，它给了我一个jQuery日期选择器，但是与模型的绑定似乎不起作用

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

---

任何帮助都将不胜感激。

首先，很高兴您使用angularjs，这是一个很好的框架。不久前启动了一个分支项目来处理诸如包装jquery ui和创建ui模块之类的事情

下面是Peter Bacon Darwin实现的链接

---

--dan

angular ui日期选择器不能与angular 1.0.0一起工作，所以我重写了它。My fork使您能够设置日期在输入中的格式以及如何将其保存回模型

代码： JSFIDLE：（缺少jquery ui样式，但工作原理相同）

---

---

我刚刚修改了代码，请看一下：

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 />

类似于Pravepd（使用他们的作为基础），但这将包括深入的模型选择

var myApp=angular.module（'myApp'，['myApp.directives']）；
函数MainCtrl（$scope）{
$scope.deepValue={
fromDate:null，
toDate:空
}
}
angular.module（'myApp.directives'，[]）
.directive（'myDatepicker'，function（）{
返回函数（范围、元素、属性）{
元素日期选择器({
变化年：是的，
变化月：对，
附录文本：‘（yyyy-mm-dd）’，
日期格式：'年-月-日'，
onSelect:函数（日期文本）{
var mdlAttr=$（this.attr（'ng-model'）.split（“.”）；
如果（mdlAttr.length>1）{
var objAttr=mdlAttr[mdlAttr.length-1]；
var s=范围[mdlAttr[0]]；
对于（变量i=0；i

这是一个老问题，但这是我在谷歌搜索中第一次找到这个问题。无论如何，我使用了双日期选择器，使用jquery和angular指令一起工作，所以我想我可以分享一下，以帮助其他尝试这样做的人

这是它的好处：

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

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

Html:

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

---

请随意进一步优化它。如果你这样做了，就用叉形按钮发表评论：）

对于那些在谷歌上搜索这个问题的人（就像我一样），将jQuery UI datepicker与Angular绑定的一种更简单的方法是这样做

$.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（）

初始化代码之前

（摘自我在这里发布的另一个答案：）

这是解决方案：）

代码：

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

  });

---

好吧，我似乎有一个解决办法--我仍然想知道这是否是处理这个问题的正确/最佳方法。我相信不需要选择日期选择器。当选择器被更改时，这些值将已经绑定到模型中。@dj2这是我的想法，但检查原始消息中的小提琴-模型没有绑定。有趣的是，虽然我今天下午尝试过，但我没有发现您必须按Run按钮重新加载。您应该将代码发布到您的问题中，不仅仅依赖于到JSFIDLE的链接。这样，如果JSFIDLE因任何原因无法使用，您的答案仍然有用。谢谢Dan-奇怪的是，我实际上在一天前尝试了AngularUI，它给出了完全相同的绑定问题-但是我现在再次尝试，它工作得非常好。这仍然不能与最新的AngularJS（1.0.2和AngularUI）（今天采用最新版本）一起使用：-（Sutikshan，你能发布一个fiddle/plunkr来描述什么不起作用吗？并提供更多的背景信息，就像使用的浏览器一样。Dinesh示例运行良好。我知道有一些问题正在报告，但它确实起作用。这个链接现在显示404，你能更新url吗？请将你的代码发布到你的答案中，因为那时你的答案仍然有效l如果JSIDLE因任何原因不可用，则非常有用。将您的代码发布到您的答案中，因为如果Gist或JSIDLE因任何原因不可用，则您的答案仍然有用。要提高您的帖子质量，请包括您的帖子将如何/为什么解决此问题。

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

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

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

  });