javascript - 在 KendoUI 的模板中使用 AngularJS ng-click 时不会调用

Question

我正在将 kendoui 与 angularjs 一起使用，并尝试在 kendo listView 的模板中使用复选框。但问题是 Angular 的 ng-click 没有被调用。这是我的代码：

            var dataSource = new kendo.data.DataSource({
                data: roles
            });

            this.element.find('div#listcontent').kendoListView({
                template: kendo.template("<div><table > \
                                          <tr><td><input type='checkbox' # if(data.IsSelected) {# checked #}# ng-click='toggleSelection(\"#:data.Name#\")' /></td><td>#:data.Name#</td></tr>
                                          </table></div>"),
                dataSource: dataSource,
                selectable: true
            });

复选框呈现如下：

<input type="checkbox" ng-click="toggleSelection('Sales Person')">

我已经检查了与控件关联的范围内是否可以使用 toggleSelection。调用 toggleSelection 的原因是为了更新作用域内模型中的值。

我不能使用 ng-checked 代替 ng-click，因为 ng-checked 需要 ng-model，如果我使用了 ng-repeat 则可以使用，因为我必须使用 kendo 的列表视图。另外，模型中没有我可以直接绑定的字段。

我是否必须以某种方式 $compile 列表视图？

Answer 1

我这样修复它：

this.element.find('div#listcontent').kendoListView({
                template: kendo.template("<div><table> \
                                          <tr><td style = '\\padding:8px;'><input type='checkbox' # if(data.IsSelected) {# checked #}# /></td><td style='\\padding:8px;'>#:data.Name#</td></tr> \
                                          </table></div>"),
                dataSource: dataSource,
                selectable: true,
                change: function (e) {
                    var data = dataSource.view();
                    var selected = $.map(this.select(), function (item) {
                            return data[$(item).index()].Name;
                    });

                    if (selected)
                        oThis.toggleSelection(selected);
                }
            });
        }

        public toggleSelection (name: string) {
            /* definition */
        }