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

Question

我目前面临的是多方面的'problem'，可以分为几个步骤。

框架的用户将能够通过 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>

如您所见，此处定义了一个范围滑块（输入类型="range"）和一个复选框（输入类型="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 一种简单的内置方法来处理这个问题？

Answer 1

是的，您处理它的方式不对，HTML 在 angular 加载时被解析，这就是为什么它在硬编码时工作正常，但在动态添加时却不行。请检查此 link 以了解如何将 HTML 动态添加到您的应用程序中

Answer 2

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

的指令中可能是个好主意

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

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

Dynamically generate input fields + ng-change binding with AngularJS

xml

input

dynamic

angularjs