2

我一直在尝试为我的 Angular 应用程序编写一个共享指令，将输入字段转换为 jquery timepicker。

我有两个输入字段，fromTime 和 toTime，我想在 fromTime 更改时更新 toTime。

我的代码如下：

HTML

<input type="text"
       time-picker="{ timeFormat: 'H:i'}"
       class="input-block-level"
       name="fromTime"
       ng-model="filter.fromTime"
       ng-change="update()" 
/>

<input type="text"
       time-picker="{ timeFormat: 'H:i'}"
       class="input-block-level"
       name="toTime"
       ng-model="filter.toTime"
       ng-change="update()" 
/>

指示

sharedServices.directive('TimePicker', function () {
return {
    restrict: 'A',
    scope: {
        time: "=ngModel"
    },
    link: function(scope, element, attrs) {
                    //Initialize the timepicker
        $(element).timepicker(scope.$eval(attrs.TimePicker));
                    //watch for changes
        scope.$watch('time', function(stuff) {
            console.log('some change', stuff);
        });
    }
};
});

包括共享服务

var roomsApp = angular.module("roomsApp", ["ngResource",'ui', 'sharedServices','ui.bootstrap']).config(function($routeProvider) { ...

指令加载并且时间选择器被初始化并附加到元素，但是当我更改输入字段时没有任何反应，甚至没有附加到元素的 ng-change 事件。页面加载时输入字段也是空的，即使模型设置为在应用程序的控制器中包含某些值。任何人都可以对此事有所了解吗？

*更新 http://plnkr.co/edit/t3BzShezEdh29ZAlI8ZI?p=preview这说明了我的问题。更改日期时没有控制台记录任何内容

4

2 回答 2

6

解决问题

您需要听取输入字段的更改并更新scope.time。

我所做的第一个更改是在 jQuery之后包含 Angular ，这样element参数将是一个 jQuery 对象。

然后监听 change 事件并更新scope.time。将调用包装起来scope.$apply，告诉 Angular 发生了一些变化。

element.on('change', function () {
    scope.$apply(function () {
        scope.time = element.datepicker('getDate');
    });
});

Plunker

替代方法

就个人而言，在编写应用于输入元素的指令时，我希望允许用户使用ngModel指令来保持数据同步，因为这是一个已知的约定。通过使用 ngModel，您还可以（可选地）使用它的控制器来添加自定义验证或其他逻辑，例如解析器/格式化程序（在这种情况下不需要）。

通过使用该$parse服务，我们可以将数据读/写回 ngModel 字段。

我还进行了更改，以便可以在需要时传递日期时间选项。

最后，我将第一次datetime()调用移至 compile 函数，因为那是应该进行 DOM 操作的地方。

.directive("datetime", ['$parse', function($parse) {
  return {
      require: '?ngModel',
      restrict: 'A',
      compile: function (element, attrs) {
        var options = $parse(attrs.datetime)() || {};
        console.log('Passed options:', options);

        element.datepicker(options);

        // Return the link function
        return function (scope, element, attrs, ngModel) {
          var getter, setter;

          // If the ngModel directive is used, then set the initial value and keep it in sync
          if (ngModel) {
            getter = $parse(attrs.ngModel);
            setter = getter.assign;

            console.log('ngModel directive used, setting initial value')
            element.datepicker("setDate", getter(scope));

            scope.$watch(attrs.ngModel, function(val, prev) {
              console.log('ngModel changed from', prev, 'to', val);
            });

            element.on('change', function () {
              console.log('change');
              var newValue = element.datepicker('getDate');
              scope.$apply(function () {
                setter(scope, newValue);
              });
            });
          }
        };
      }
  };
}])

该指令的使用方式如下：

<input type="text" datetime="{showButtonPanel: true}" ng-model="parentTime" />

Plunker

于 2013-06-06T20:27:02.347 回答
0

更新： 这是一个使用 jquery datepicker 的非常基本的实现 - http://plnkr.co/edit/4JZIWo6mJqg59F5o7xdh?p=preview

angular
.module("demo", [])
.directive("test", function() {
  return {
      restrict: 'A',
      scope: {
          time: "="
      },
      link: function(scope, element, attrs) {
        console.log("scope.time:" + scope.time);
        $(element).datepicker();
        $(element).datepicker("setDate", scope.time);
      }
  };
})
.controller("demoCtl", function($scope){
  $scope.parentTime = new Date();
});

看看angular-ui 日历模块。如果您不想使用它，可以查看他们的代码来帮助您。

此外，您设置范围的方式看起来很奇怪。我认为您想将指令的time属性绑定到由指令的父范围管理的属性，而不是 ng-model。

试试这个

return {
    restrict: 'A',
    scope: {
        time: "="
    },
    link: function(scope, element, attrs) {
                    //Initialize the timepicker
        $(element).timepicker(scope.$eval(attrs.TimePicker)); 
                    //watch for changes
        scope.$watch('time', function(stuff) {
            console.log('some change', stuff);
        });
    }
};

并使用它

<input type="text"
       time-picker="{ timeFormat: 'H:i'}"
       class="input-block-level"
       name="toTime"
       time="filter.toTime"
       ng-change="update()" 
/>

你也不需要换attrs.TimePicker行$scope.eval。

于 2013-06-06T14:50:53.953 回答