如何从自定义指令

时间:2017-09-15 05:41:56

标签: angularjs angularjs-directive

这个问题与Trigger ngChange from custom directive类似,但建议的解决方案不够好,无法考虑。

我正在使用AngularJS 1.4.7。我的指令定义为:

(function () {
    "use strict";

    angular.module('myModule')
    .directive('myDatePicker', ['$filter', function ($filter) {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                dateFormat: '@',
                ngModel: '='
            },
            link: function ($scope, $element, $attrs, ngModelCtrl) {
                $element.datepicker({
                    onSelect: function (dateText) { // it will be something like '7 Apr, 2017'

                        // but I want to display the time as well 
                        dateText += ' 18:26:00 PM'; // for simplicity, let's hard code it

                        $scope.$apply(function () {
                            ngModelCtrl.$setViewValue(dateText);
                        });

                    },
                    dateFormat: $scope.dateFormat,
                    beforeShowDay: beforeShowDay
                });

                function beforeShowDay(date)
                {
                    return [true, ""];
                }
            }
        };
    }]);

}());

它使用jQueryUI的DatePicker。我的HTML标记:

<input type="text" class="form-control"
       name="birthDate"
       my-date-picker 
       date-format="d M, yy" 
       data-ng-model="onesBirthday" 
       ng-change="vm.onBirthDateChange(currentPlayer)"
        />

为简单起见,我会跳过我的Ng控制器,没关系。

嗯,从选择器中选择一个日期后触发onBirthDateChange()处理程序,但输入的值永远不会是'2017年4月7日18:26:00 PM'。所以,我将onSelect()方法更改为:

onSelect: function (dateText) { // it will be something like '7 Apr, 2017'

    // but I want to display the time as well 
    dateText += ' 18:26:00 PM'; // for simplicity, let's hard code it

    ngModelCtrl.$viewValue = dateText;
    ngModelCtrl.$render();

    $scope.ngModel = ngModelCtrl.$modelValue = dateText;

    $element.change();

}

它确实会改变输入控件的值,但是,从不触发ngChange,onBirthDateChange()永远不会运行。

我想念什么?感谢。

背景

$ setViewValue(dateText)没有将视图的值更改为dateText的原因可能是它失败了一些内部验证,因为它没有时间部分,而且传递的字符串有。

0 个答案:

没有答案