动态生成的 html/ionic 复选框内的 ng-change 未绑定

Question

我和我的团队一直在处理 XML 文件并基于所述 XML 编写 设置 页面。这里的元素是动态生成的。 请在下面找到如何生成元素的示例。

 settings.getToggle = function(label, def){var str1 = '<li class="item lighten orange">';
var str2 = label;  //get label from xml
return str1 + str2 + '<label class="switch orange">' +
                     '<input type="checkbox" ng-model="testmodel" class="switch-input" >' +
                     '<span class="switch-label" data-on="Aan" data-off="Uit"></span>' +
                     '<span class="switch-handle"  ></span></label></li>';};

这段小代码确保当 XML 文件说：“你必须显示一个切换按钮”时，一个切换按钮被添加到 设置页面 并相应地显示。可以有多个相同类型的按钮。在控制器中，我们将这段代码称为：(settings.getToggle(...);

  $(this).find("setting[type='toggle']").each(function () {
                      var label = $(this).find("label").text();
                       var def = $(this).find("default");
                       $("div>.list").append(settings.getToggle(label, def));
                   });

到这里没问题。 html 生成完美。

此时我们必须能够将处理程序附加到所述元素。这就是麻烦开始的地方。

在这个带有离子布局的 html5 复选框中添加 ng-change 时，甚至是 ng-click、ng-model、...你的名字，代码似乎根本没有响应。

示例（html 的其余部分 -> 第一个代码片段）：

'<input type="checkbox" ng-click()="testmodel" class="switch-input" >'

加上一个角码（在一个工作的、经过测试的控制器中）

    .controller('SettingsController', function ($scope)
{
    $scope.testmodel = function(){
        alert("click");
    };

在这种情况下不会弹出警报。有谁知道如何解决这一问题？ 这是我的主要和最重要的问题。

通过扩展，由于我对 Angular 比较陌生，我很难想象如何从那里前进。我曾考虑为每个元素添加一个更改侦听器，然后以某种方式获取元素的名称（模型？）并将它们放入 json var 并放入 localstorage。有没有人有更具体的想法。我实际上不确定此时该怎么做。

最后，我想提前为张贴和角度的错误道歉。我在（stackoverflow 和 angular）都只是一个初学者。

Answer 1

在ng-click 上更改为不带() 并将其附加到函数名称testmodel()：

'<input type="checkbox" ng-click="testmodel()" class="switch-input" >'

See the plnkr.

---

如果您要使用 ng-change 指令，那么您还需要使用 ng-model 指令：

<input type="checkbox" ng-model='this.checked' ng-change="testmodel()" class="switch-input" >

在控制器的方法中：

$scope.testmodel = function() {
   alert(this.checked);
};

ng-change with ng-model example plnkr.