在 jqxGrid 中渲染 AngularJS 指令答案

【问题标题】：Render AngularJS directive within jqxGrid在 jqxGrid 中渲染 AngularJS 指令
【发布时间】：2014-11-09 21:26:00
【问题描述】：

使用 jqxGrid 制作带有数据的表格（显然）。

我已经在 jqxGrid 中加载了我的 angular 指令元素，数据可以正常更新网格，但它只是停留在那里，未渲染，我不知道如何触发渲染。

这是我的 jqx 设置：

   AppvisAgentsCtrl.settings = {
        autowidth: true,
        ...
        columns: [

            { text: 'A', cellsrenderer: insertActionMenu, width: 50 },
           ...
        ]
    }

insertActionMenu 现在就是这个：

function insertActionMenu(){

    var output = [
        '<actionmenu></actionmenu>'
        ].join('');

    return output;
}

我的问题是，在 DOM 检查器中，我只会在每一列的页面上看到 <actionmenu></actionmenu>，我想告诉它渲染到它应该是的指令中。

是的，actionmenu 指令有效，我在整个应用程序中多次使用它。

编辑

一切都在 jqx-grid 指令中：

<jqx-grid 
    jqx-settings="appvisagents.settings" 
    jqx-source="appvisagents.testData.things">
</jqx-grid>

【问题讨论】：

标签： javascript angularjs jqxgrid jqwidget

【解决方案1】：

假设这发生在指令中，您需要在添加之前编译'<actionmenu></actionmenu>'。见$compile服务here

【讨论】：

你的意思是在指令的编译函数中还是在insertActionMenu()中？
$compile 服务只能在指令内部使用，您需要在函数内部添加 actionMenu 指令进行编译，以便 Angular 知道它需要用真正的指令 dom 替换它。我意识到在您的情况下代码可能不在 jqxgrid 指令中，所以我不确定您是否可以这样做。也许试试这个：stackoverflow.com/questions/22370390/…

【解决方案2】：

好的，所以我发现这个工作的唯一方法是在设置中使用“渲染”事件并逐个 $compile 我的操作菜单。

不幸的是，在注入它之前我无法 $compile 它，因为 jqx-gid 只会注入文本和 HTML，并且任何附加对象的尝试都会导致 [Object object] 被附加。

AppvisAgentsCtrl.settings = {
        autowidth: true,
        ...
        columns: [

            { text: 'A', cellsrenderer: insertActionMenu, width: 50 },
           ...
        ],
        rendered: function(){ 
            $element.find('actionmenu').each(function(i,e){
                $compile(e)($scope);
            });
        }
    }

对我来说，这不是一个好的解决方案，原因如下：

尽管为此任务强加了 jqwidgets，但我想避免尽可能使用 jQuery
我不知道这会如何影响性能超过数千行
我还需要修改这个指令来绑定对应行的数据模型

但是我确实让它渲染了。

【讨论】：

您找到更好的解决方案了吗？