Question

我有一个角度的表单，有两个动态添加新字段。在ng-click按钮内部发出了div指令，并且（当然）处理了ng-repeat。问题不在于它们不起作用，问题是当你点击“添加新”按钮时它们被执行了三次。

我查了一些基本的东西：

Angular被调用一次不会更多次。
已禁用browsersync的ghostmode。

并没有问题。问题是（我认为）在角度的表单的默认行为...任何ng-click执行“提交”...让我告诉你代码：

这是我的控制器代码，用于添加新字段：

        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中的绑定，以下是公共代码段中的标记（在jade中，为简单起见）：{ {3}}

错误屏幕：GITLAB SNIPPET

单击任何“添加新”按钮时，

发出3次相同的错误...

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

编辑：

safeApply清除了$apply already in progress的问题，但基本问题仍然存在。我使用$ apply来使我的ng-repeat绑定工作，因为：

.col.s12(ng-repeat="cancelation in product.cancelations")

和此：

input(type="text" name="cancelation.inputName" ng-model="cancelation.namePayload" required)

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

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

Answer 1

1）如果您的功能已经在控制器中，则需要从功能中删除$scope.$apply();，并且不要在角度以外执行任何异步操作。在您的情况下，似乎他们不会 - 他们只是在该阵列中添加静态项目。

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);
  }
};

角度ng-click在表单内部触发两次或更多次

这是我的控制器代码，用于添加新字段：

编辑：

1 个答案: