Question

有些东西告诉我，我有足够的线索，我应该能够得到这个，但我已经走了很多路，我的脑袋旋转到很多，以拼凑出一个有效的解决方案。

我有一个指令，它引入了嵌套在另一个内部的ngRepeat。内部重复根据迭代的集合中的对象附加类指令{{portlet.id}}。示例ID为portlet-one：

return ['canvas', function($compile) {
    return {
        restrict: 'E',
        replace: true,
        scope: { windows : "=" },
        template:   '<div class="column" ng-repeat="column in windows.columns">' + 
                        '<div class="portlet {{portlet.id}}" ng-repeat="portlet in column.portlets"></div>' +
                    '</div>'
    };
}];

这会产生有效的html，但内部重复分配的{{portlet.id}}指令在运行时不被Angular拉入。我无法将内部重复从模板中拉出到$compile链接函数中，因为我无法访问外部$index，所以我在范围内尝试了$apply链接功能（关于预期的摘要错误）。

我也验证了{{portlet.id}}的价值。

导致我$compile和$apply的原因是当我对它们进行硬编码时加载指令：

template: '<div class="column" ng-repeat="column in windows.columns">' + 
             '<div class="portlet portlet-one" ng-repeat="portlet in column.portlets></div>' +
          '</div>'

我认为Angular没有被告知新的内部指令。如果是这种情况，我不确定如何让Angular解析DOM更改以应用新的内部指令模板。也许这与类指令的插值有关？

分辨

我对工作硬编码的内部指令参考的观察是关键。我没有尝试插入{{portal.id}}，而是引入另一个指令来隔离内部重复集合：

template: '<div class="column" ng-repeat="column in windows.columns">' + 
              '<portlet-canvas portlets="column.portlets"></portlet-canvas>' +
          '</div>'

然后我手动构建html字符串并用编译结果替换<portlet-canvas>：

return ['portletCanvas', function($compile) {
    return {
        restrict: 'E',
        replace: true,
        scope: { portlets : '=' },
        link : function (s, e, a) {

            var html = '';

            for (var i = 0; i < s.portlets.length; i++) {
                html += '<div ' + s.portlets[i].id + ' class="portlet"></div>';
            };

            var portletElement = $compile(html)(s);
            e.replaceWith(portletElement);
        }
    };
}];

虽然这是有效的，但如果有人有更好的解决方案来解决这个问题，我会全力以赴。

当通过ng-repeat进行插值时，AngularJS嵌套指令不会加载

0 个答案: