克隆AngularJS绑定：querySelectorAll仅选中首个元素，双向绑定仅生效一次

问题原因 #

原代码中，遍历ng-bind元素时会反复覆盖输入框的oninput事件处理函数。比如第一次循环把事件设为更新第一个<p>，第二次循环又替换成只更新第二个<p>，最终只有最后一次赋值的逻辑生效，导致仅单个标签同步更新。

修复后的JavaScript代码（script.js） #

'use strict';
/*jshint esversion: 6*/
/*Copyrights HEMANTH ABHIRAM SOMARAJU*/
var i = ['app', 'model', 'bind'].map(l => 'ng-' + l),
    i2 = i.map(l => 'data-' + l);

const fa = (a, b) => a.getAttribute(i[b]) || a.getAttribute(i2[b]),
      fb = (a, b = '', c = document) => c.querySelectorAll(b !== '' ? `*[${i[a]}='${b}'],*[${i2[a]}='${b}']` : `*[${i[a]}],*[${i2[a]}]`);

fb(0).forEach(appEl => {
    fb(1, '', appEl).forEach(inputEl => {
        const modelName = fa(inputEl, 1);
        // 获取当前model对应的所有绑定元素
        const bindElements = fb(2, modelName, appEl);
        // 绑定输入事件，批量更新所有元素内容
        inputEl.oninput = () => {
            bindElements.forEach(el => {
                el.innerText = inputEl.value;
            });
        };
        // 初始化同步输入框值到绑定标签
        bindElements.forEach(el => {
            el.innerText = inputEl.value;
        });
    });
});

关键修改说明 #

• 先一次性获取当前ng-model对应的所有ng-bind元素，避免重复查询
• 在oninput事件中遍历所有绑定元素批量更新，不再反复覆盖事件处理函数
• 增加初始化同步逻辑，页面加载时就将输入框初始值同步到绑定标签

内容的提问来源于stack exchange，提问作者HEMANTH ABHIRAM SOMARAJU