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

时间:2014-06-09 14:16:47

标签: javascript angularjs kendo-ui kendo-template kendo-listview

我正在使用kendoui和angularjs并试图在kendo listView的模板中使用一个复选框。但问题是没有调用角度的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的listview。另外,模型中没有可以直接绑定的字段。

我是否必须以某种方式$编译列表视图?

1 个答案:

答案 0 :(得分: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 */
        }