Angularjs指令不使用jQuery UI

时间:2015-03-20 16:14:06

标签: jquery angularjs angularjs-directive

我正在努力让一个jQuery UI日期选择器在AngularJS 1.3指令中工作。到目前为止,我已经能够在屏幕上显示日期选择器,并在文本框中显示所选值。但是,我无法将所选值传递回父控制器,以便在应用程序中使用。

这是我的指令代码。

angular.module("demo", []).directive('myDatepicker', function ($parse) {
   return {
      restrict: "E",
      replace: true,
      transclude: false,
      compile: function (element, attrs) {
         var modelAccessor = $parse(attrs.ngModel);
     var html = "<input type='text' id='" + attrs.id + "' >" +
        "</input>";

     var newElem = $(html);
     element.replaceWith(newElem);

     return function (scope, element, attrs, controller) {

        var processChange = function () {
           var date = new Date(element.datepicker("getDate"));

           scope.$apply(function (scope) {
              // Change bound variable
              modelAccessor.assign(scope, date);
           });
        };

        element.datepicker({
           inline: true,
           onClose: processChange,
           onSelect: processChange
        });

        scope.$watch(modelAccessor, function (val) {
           var date = new Date(val);
           element.datepicker("setDate", date);
        });

     };

  }

}; });

2 个答案:

答案 0 :(得分:1)

根据您的评论,我建议您带入棱角分明的材料。他们有一个伟大的日期选择器用于Angular 1.3:

Angular Material Form with Date Picker Demo

答案 1 :(得分:0)

如果要在应用程序中使用所选值,请记住

  

要在文本框中显示的选定值

获取输入的值,它根据您的单词选择了datepicker的值。

我建议您阅读更多有关AngularJS的信息,您会发现使用$ watch和$ apply不建议使用这种&#34;简单&#34;甚至&#34;琐事&#34;操作