使用 AngularJS 动态生成输入字段 + ng-change 绑定答案

【问题标题】：Dynamically generate input fields + ng-change binding with AngularJS使用 AngularJS 动态生成输入字段 + ng-change 绑定
【发布时间】：2015-02-21 18:53:02
【问题描述】：

我目前面临一个多方面的“问题”，可以分为几个步骤。

框架的用户将能够通过打开设置页面时读取的 XML 文件将设置动态添加到 UI。示例：

<settings>
    <group>
        <groupname>Profile settings</groupname>
        <groupsettings>
            <setting type="range" savename="volumeslider">
                <label>Volume</label>
                <min>0</min>
                <max>10</max>
                <step>1</step>
                <default>5</default>
                <labelleft>Low</labelleft>
                <labelright>High</labelright>
            </setting>
            <setting type="checkbox" savename="brightnesstoggle">
                <label>Brightness</label>
                <default>true</default>
            </setting>
        </groupsettings>
    </group>
</settings>

如您所见，此处定义了一个范围滑块 (input type="range") 和一个复选框 (input type="checkbox")。

目前 XML 是通过 ajax 调用解析的

$.ajax({
            type: "GET",
            url: "settings/globalapp.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('group').each(
                    function(){/* Parse code here */}
    })

这会被解析为一个长字符串，然后将该字符串附加到 UI 中的正确位置。

$("ul>.globalList").append(outputString);

outputString = "<input type="range" min="0" max="10" value="5" ng-model="volumeslider" ng-change="settingsInputChanged(volumeslider, 'volumeslider')">"

如您所见，我有一个 ng-change 绑定，但是当代码附加 jQuery 时，这不起作用。当我将此字符串硬编码到我的 HTML 中时，它可以完美运行（settingsInputChanged 是一个通用函数，用于将设置值添加到 localStorage）。

我解决这个问题是完全错误的，还是 Angular 有一个简单的内置方法来处理这个问题？

【问题讨论】：

标签： xml angularjs dynamic input

【解决方案1】：

是的，您处理它的方式错误，当角度加载时 HTML 会被解析，这就是为什么当您对其进行硬编码时它可以正常工作，但当您动态添加它时却不行。请查看link 了解如何将 HTML 动态添加到您的应用程序中

【讨论】：

我在寻找答案时也遇到了这个例子。我会再试一次，更深入
使用模板方法有效，谢谢！但是我现在遇到了另一个问题，在 ng-change 指令中获得了一个唯一标识符 - stackoverflow.com/questions/28646571/…

【解决方案2】：

尝试使用 Angular 等效项来执行此操作。更改 DOM 中的内容通常是通过指令完成的。因此，最好使用 $http 解析 XML，然后将对象/字符串传递给呈现 html 的指令。

https://docs.angularjs.org/guide/directive

【讨论】：

我认为指令可能是答案，但我对它们不是很有经验。希望文档能帮助我