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

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 文件显示:“您必须显示切换按钮”时，切换按钮会添加到设置页面并相应地显示。可以有多个相同类型的按钮。在 Controller 中，我们调用此代码:(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 生成完美。

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

在使用 ionic 布局向此 html5 复选框添加 ng-change，甚至 ng-click、ng-model...您能想到的东西时，代码似乎根本没有响应。

示例(html 的其余部分 -> 第一个代码片段):

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

加上 Angular 代码(在工作的、经过测试的 Controller 中)

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

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

推而广之，由于我对 Angular 比较陌生，我很难想象如何从那里前进。我曾考虑过向每个元素添加一个更改监听器，然后以某种方式获取元素的名称(模型？)并将它们放入 json var 并放入本地存储中。有没有人有更具体的想法。我实际上不知道此时该怎么办。

最后，我想对发帖和 Angular 上的错误提前表示歉意。我在这两个领域(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" >

在 Controller 的方法中:

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

ng-change with ng-model example plnkr.