Angular UI Grid:如何将HTML与cellTemplate绑定,并动态构建ng-click工作的HTML

Angular UI Grid: How to bind HTML with the cellTemplate, AND dynamically build HTML that ng-click works on

本文关键字:HTML 动态 构建 工作 ng-click 绑定 Grid UI Angular cellTemplate      更新时间:2023-09-26

这是按要求进行的 plunker-http://plnkr.co/edit/tIkBFO?p=preview

我正在使用控制器作为模式。我一直在使用带有过滤器($sce)的单元格模板来清理,然后构建HTML。在我的一生中,我无法让 ng-click 注册到我的控制器。

我可以将单元格模板更改为单元格模板:'<button ng-click="grid.appScope.user.delete(''works!'')">X</button>' ->这有效。

无论如何不使用单元格模板并且仍然可以访问控制器吗?详细信息列是我遇到问题的地方。

感谢您的阅读!

相关问题-https://github.com/angular-ui/ui-grid/issues/4116

https://github.com/angular-ui/ui-grid/issues/4886

这是代码-

        var user = this;
        user.gridDefs = [{
                            displayName: 'User ID',
                            name: 'userId',
                            width: "10%"
                        }, {
                            name: 'firstName',
                            width: "15%"
                        }, {
                            name: 'lastName',
                            width: "15%"
                        }, {
                            name: 'email',
                            cellTemplate: '<div ng-bind-html="COL_FIELD |trustedclean"></div>',
                            width: "25%"
                        }, {
                            name: 'username',
                            width: "15%"
                        }, {
                            name: 'details',
                            cellTemplate:'<div ng-bind-html="COL_FIELD |trustedclean"></div>'
                            width: "20%"
                        }, ];
user.gridData = _.map(dataFromSvc.users, function(user) {
                    var buildDetailsString = buildDetails(user.uid);
                    var object = {
                        'userId': user.Id,
                        'firstName': user.firstName,
                        'lastName': user.lastName,
                        'email': '<a href='"mailto:' + user.primaryEmail + ''">' + user.primaryEmail + '</a>',
                        'username': user.uid,
                        'details': '<div><a href='"#/viewuser/'+user.uid+'/true'">View</a>/<a ng-click='"user.deleteUser('+user.uid+')'">Delete</a></div>'
                    return object;
                });
    user.deleteUser = function(uid) {
                    console.log(uid);
                };

这是 HTML-

<div id="grid2" ui-grid="{ data: user.gridData, columnDefs:user.gridDefs}" class="grid"></div>

足以绑定包含 html 的字符串

{ field: 'message', displayName : 'Message Description', cellTemplate: '<div ng-bind-html="COL_FIELD"></div>' }

回答我自己的问题-

不要消毒,并在ui-grid上使用ng-bind。使用模板管理单元格。这就是我所做的。

cellTemplate:dynamicTemplate