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

Question

我编写了一些 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

它说:一个常见的错误是绑定(bind)到一个每次调用时都会生成一个新数组的函数....解决方案是如果元素没有改变则返回相同的数组对象。

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

我觉得我正在做一些事情，让这比它应该做的更难。

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

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

Answer 1

我会做的是:

输入:

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


}