Question

我的问题是控制台向我展示了例如（编号58）：

[ngModel:numfmt] Expected `58` to be a number
http://errors.angularjs.org/1.6.5/ngModel/numfmt?p0=58
at vendor.min.js?q=CI_COMMIT_SHA:45
at Array.<anonymous> (vendor.min.js?q=CI_COMMIT_SHA:51)
at vendor.min.js?q=CI_COMMIT_SHA:51
at Scope.$digest (vendor.min.js?q=CI_COMMIT_SHA:49)
at Scope.$apply (vendor.min.js?q=CI_COMMIT_SHA:49)
at HTMLInputElement.<anonymous> (vendor.min.js?q=CI_COMMIT_SHA:66)
at HTMLInputElement.dispatch (vendor.min.js?q=CI_COMMIT_SHA:3)
at HTMLInputElement.elemData.handle (vendor.min.js?q=CI_COMMIT_SHA:3)

我在angularjs ngModel:numfmt查了一下，但我加入了我的coustom指令 string-to-number ，如下所示：

template = `
            <div class="custom-range-slider">
                <span> {{title}}: </span>
                <div style="padding-bottom: 5px;"></div>
                <input type="range" string-to-number max-length="{{maxLength}}" min="{{min}}" max="{{max}}" step="{{step}}" ng-model="ngModel">
            </div>
        `;

作为要求。我用我的代码更新了

module app.common.directives {

    export interface IAppSliderScope extends ng.IScope {
        ngModel: any;
        onUpdate: () => any;
        title: string;
        maxLength: number;
        min: number;
        max: number;
        step: number;
        vm: AppSliderController;
    }

    export class AppSlider implements ng.IDirective {
        scope: any = {
            ngModel: "=",
            onUpdate: "&",
            title: "@",
            maxLength: "@",
            min: "@",
            max: "@",
            step: "@"
        };
        controller = AppSliderController;

        template = `
            <div class="custom-range-slider">
                <span> {{title}}: </span>
                <div style="padding-bottom: 5px;"></div>
                <input type="range" string-to-number max-length="{{maxLength}}" min="{{min}}" max="{{max}}" step="{{step}}" ng-model="ngModel">
            </div>
        `;

        restrict: string = "E";

        //Use this to register this directive
        static factory(): ng.IDirectiveFactory {
            var directive: ng.IDirectiveFactory = () => new AppSlider();
            return directive;
        }
    }

    class AppSliderController {
        init;
        val;
        onUpdate; // Override callback for adding an entity to the list

        // @ngInject
        constructor(
            private $scope: IAppSliderScope,
            private $element: ng.IAugmentedJQuery,
            private $attrs,
            private $transclude
        ) {
            $scope.vm = this;

            this.$scope.$watch("ngModel", () => {
                this.showPercentage();
                this.drawRangeTrace();
                this.add();
            });
        }

        add() {
            if (this.$attrs.onUpdate != undefined) {
                this.$scope.onUpdate();
            }
        }

        showPercentage() {
            this.init = parseInt(this.$scope.ngModel);
            const min = parseInt(this.$element.attr('min'));
            const max = parseInt(this.$element.attr('max'));
            this.val = (this.init - min) / max - min;
        }

        drawRangeTrace() {
            this.$element.children().find('input').css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + this.val + ', #2196F3), '
                + 'color-stop(' + this.val + ', #C5C5C5)'
                + ')'
            );
            this.$element.children().find('input').val(this.init);
        }
    }
}

我在全局表单上使用此指令：

<div class="custom-time-table">
            <table class="uib-timepicker">
                <tbody>
                    <tr>
                        <td class="form-group uib-time hours" ng-class="{'has-error': invalidHours}">
                            <input type="text" placeholder="HH" autofocus ng-model="hours" ng-change="updateHours()" class="form-control text-center" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="noIncrementHours()" ng-blur="blur()">
                        </td>
                        <td class="uib-separator">:</td>
                        <td class="form-group uib-time minutes" ng-class="{'has-error': invalidMinutes}">
                            <input type="text" placeholder="MM" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" maxlength="2" tabindex="{{::tabindex}}" ng-disabled="noIncrementMinutes()" ng-blur="blur()">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
      <div>
            <app-slider title="Hours" max-length="2" min="00" max="23" step="01" ng-model="hours" on-update="updateHours()"></app-slider>
            <app-slider title="Minutes" max-length="2" min="00" max="59" step="01" ng-model="minutes" on-update="updateMinutes()"></app-slider>
        </div>

是否有人建议做什么？或者隐藏控制台中的错误感谢

ng-model for time显示错误

0 个答案: