javascript - Angular ng-click 在表单内触发两次或更多次

Question

我有一个 Angular 表单，其中有两个动态添加新字段。在 div 按钮内使用 ng-click 指令触发，并针对 ng-repeat 进行处理(当然)。问题不在于它们不起作用，问题在于当您单击“添加新”按钮时它们会执行三次。

我检查了一些基本的事情:

• Angular 被调用一次，而不是多次。
• browsersync 的 Ghost 模式已禁用。

而且没有任何问题。问题是(我认为) Angular 形式的默认行为...任何 ng-click 都会执行“提交”...让我向您展示代码:

这是我添加新字段的 Controller 代码:

        this.cancelations = [
            { 
                namePayload: "product.cancelations.name",
                descriptionPayload: "product.cancelations.description",
                inputName: "inputname-1",
                inputDesc: "inputdesc-1"
            }
        ];

        this.dateforms = [
            {
                daysFormName  : "days_1",
                daysModel     : "product.ranges.days_1",
                fromFormHrs   : "fromHrs_1",
                fromModelHrs  : "product.ranges.fromHrs_1",
                fromFormMins  : "fromMins_1",
                fromModelMins : "product.ranges.fromMins_1",
                toFormHrs     : "toHrs_1",
                toModelHrs    : "product.ranges.toHrs_1",
                toFormMins    : "toMins_1",
                toModelMins   : "product.ranges.toMins_1"
            }
        ];

        this.addDateform = () => {
            let next = this.dateforms.length;

            this.dateforms.push({
                daysFormName  : `days_${next + 1}`,
                daysModel     : `product.ranges.days_${next + 1}`,
                fromFormHrs   : `fromHrs_${next + 1}`,
                fromModelHrs  : `product.ranges.fromHrs_${next + 1}`,
                fromFormMins  : `fromMins_${next + 1}`,
                fromModelMins : `product.ranges.fromMins_${next + 1}`,
                toFormHrs     : `toHrs_${next + 1}`,
                toModelHrs    : `product.ranges.toHrs_${next + 1}`,
                toFormMins    : `toMins_${next + 1}`,
                toModelMins   : `product.ranges.toMins_${next + 1}`
            });

            $scope.$apply();
        };

        this.addPolitic = () => {
            let next = this.cancelations.length;

            this.cancelations.push({ 
                namePayload: `product.cancelationspols.name_${next + 1}`,
                descriptionPayload: `product.cancelationspols.description_${next + 1}`,
                inputName: `inputname-${next + 1}`,
                inputDesc: `inputdesc-${next + 1}`
            });

            $scope.$apply();
        };

$scope.$apply(); 用于ng-repeat，使用ng-model中的绑定(bind)，以下是公共(public)代码片段中的标记(为了简单起见，使用 Jade ):GITLAB SNIPPET .

错误屏幕:

点击任何“添加新”按钮时，3次都会引发相同的错误...

有什么想法吗？ ...提前致谢。

编辑:

safeApply 解决了 $apply 已在进行中 的问题，但基本问题仍然存在。我使用 $apply 来使我的 ng-repeat 绑定(bind)工作，因为:

.col.s12(ng-repeat="product.cancelations 中的取消")

还有这个:

输入(type =“text”name =“cancelation.inputName”ng-model =“cancelation.namePayload”必需)

这个想法很简单:cancelation.namePayload需要是:product.cancelations.description。

由于某种原因，范围不适用。

Answer 1

1) 如果 $scope.$apply(); 已经在 Controller 中，并且不在 Angular 之外执行任何异步操作，则需要从函数中删除它们。在你的情况下，他们似乎没有 - 他们只是将静态项目添加到该数组中。

2) 尝试替换为 safeApply :

$scope.safeApply = function(fn) {
  var phase = this.$root.$$phase;
  if(phase == '$apply' || phase == '$digest') {
    if(fn && (typeof(fn) === 'function')) {
      fn();
    }
  } else {
    this.$apply(fn);
  }
};