Question

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

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

如您所见，此处定义了范围滑块（输入类型=“范围”）和复选框（输入类型=“复选框”）。

目前，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会被解析，这就是为什么它在你硬编码时工作正常，但是当你动态添加它时却没有。请查看此link以了解如何将HTML动态添加到您的应用中

Answer 2

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

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

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

2 个答案: