时间戳

首页 > 解决方案 > 当用户更新输入时，如何让 AngularJS 1.6 一次调用一个函数

javascript - 当用户更新输入时，如何让 AngularJS 1.6 一次调用一个函数

问题描述

我编写了一些 AngularJS 代码，允许用户在浏览器的某些输入中输入一些数字，然后查看在svg元素上绘制的线条作为响应。

该svg元素有许多子line元素。每个都有属性 x1、x2、y1、y2 和样式。这些属性中的每一个都有一个计算值。每个计算值都是从 Javascript 函数返回的对象的属性。这意味着 Javascript 函数被调用五次：每行的每个属性调用一次。

为了整理我的显示代码并提高性能，我编写了一个 Javascript 函数，它返回一个对象数组，每个对象包含属性 x1、x2、y1、y2 和单个线条元素的样式的值。我认为这是一个简单合理的解决方案。

我的代码现在看起来像这样：

<line ng-repeat="line in getLines()" x1="{{line.x1}}" x2="{{line.x2}}
      y1="{{line.y1}}" y2="{{line.y2}}" ng-style="line.style" />

当我运行这段代码时，我得到一个 AngularJS infdig 错误，表明该模型将被计算无数次。我检查了这个错误的文档： https ://docs.angularjs.org/error/$rootScope/infdig

它说：一个常见的错误是绑定到一个函数，该函数每次调用它都会生成一个新数组……解决方案是如果元素没有更改，则返回相同的数组对象。

最后一部分根本没有帮助，因为该数组的内容确实会随着输入到表单中的每个数字而改变。

我觉得我正在做一些事情来使这比应该做的更难。

我想要的是当用户在输入字段中修改一个或多个数字时，该函数getLines应该被调用一次，结果应该用于填充各种line元素的属性，以便用户可以在浏览器中看到行。

如何确保getLines在更新 inptu 字段时调用一次？

标签： javascriptangularjs

解决方案

我会做的是：

输入：

<input id="x1" type="text" ng-change="changeHandler(elem)"/>
.
.
<input id="y2" type="text" ng-change="changeHandler(elem)"/>

处理程序：

function changeHandler(elem) {

    //Get value from event
    if (elem.id = 'x1')

        if (line.x1 != elem.value) {
            //Call function to update svg
            applyChange(line)
        }
    //.
    //.
    //.
    else if (elem.id = 'y2')

        if (line.y2 != elem.value) {
            applyChange(line)
        }


}

推荐阅读