Question

我正在使用日期选择器在AngularUI上实现范围选择器。

用于调用自定义时间选择器的html代码：

import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';

constructor(public dialogRef: MdDialogRef<any>) { }

 ngOnInit() {
        this.dialogRef.updatePosition({ top: '25px', left: '25px' });
    }

<time-range 
         name-time="Hours" 
         max-length="2" min="00" max="23" step="01" 
         ng-model="hours" 
         ng-change="updateHours()">
  </time-range>

这是我的指示：

模块app.common.directives {

  <time-range 
         name-time="Minutes" 
         max-length="2" min="00" max="59" step="01" 
         ng-model="minutes" 
         ng-change="updateMinutes()">
   </time-range>

这是它的工作方式：

但我收到了错误： 10 $ digest（）

    export interface ITimeRangeScope extends ng.IScope {
        ngModel: string;
        ngChange;
        nameTime: string;
        maxLength: number;
        min: number;
        max: number;
        step: number;
        vm: TimeRangeController;
    }

    export class TimeRange implements ng.IDirective {
        scope: any = {
            ngModel: "=",
            ngChange: "=",
            nameTime: "@",
            maxLength: "@",
            min: "@",
            max: "@",
            step: "@"
        };
        controller = TimeRangeController;

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

        restrict: string = "E";

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

    class TimeRangeController {
        init;
        val;

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

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

        showPercentage() {
            this.init = parseInt(this.$scope.ngModel);
            var min = parseInt(this.$element.attr('min'));
            var 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);
        }
    }
}

Answer 1

我将ngChange更改为onUpdate。

在html中：

Transaction=required

我在ngCgange中添加了更改;在指令

on-update="updateHours()"

绑定范围：

onUpdate: () => any;

aldo称为方法 add

onUpdate: "&",

Answer 2

在您的例外中搜索答案：

观察者在最近5次迭代中被解雇：[[{“msg”：“fn： ngModelWatch”， “的newval”： “2017-05-28T22：00：00.000Z”， “OLDVAL”： “2017-05-28T22：00：00.000Z”} ...]]

看起来您遇到了问题：

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

您在this.$scope.ngModel上倾听，并且出于某种原因，方法this.showPercentage()或this.drawRangeTrace()会更改引发其他观察者的ngModel。

为了避免内存泄漏，Angular抛出此异常以摆脱无限的摘要循环循环。

尝试通过逐行开始评论方法this.showPercentage()和this.drawRangeTrace()

来简化代码以查找有问题的代码段

在自定义指令中使用ng-change和ng-model - 摘要循环

2 个答案: