Question

我创建了一个指令myToolbar，它应该动态创建并追加由事件触发的toolbarItems。每个toolbarItem都会传递不同的数据。

请查看this jsfiddle：

输出为"baz baz baz"，但应为"foo bar baz"。

每个toolbarItem都有一个独立的范围，但所有toolbarData的{{1}}都被最后一个覆盖。

我错了什么？

我有一个解决方案（jsfiddle link）。但这不可能成为角度的方式。

我序列化了toolbarItems并将其写入toolbarData标记。

有人知道一个干净的解决方案吗？

Answer 1

您正在重新编译每次调用的所有toolbar-items：

您应该获得对新创建的元素的引用。
您应该只编译一次toolbar-item

解决方案：

这是一个工作分叉：http://jsfiddle.net/q8bUK/

scope.$on('addToolbarItem', function (e, toolbarData) {
    var newElm = angular.element('<toolbar-item>a</toolbar-item>');
    element.append(newElm);
    newElm.attr("toolbarData", JSON.stringify(toolbarData));                
    $compile(newElm)(scope);
});

Angularjs指令 - 隔离范围不起作用

1 个答案:

解决方案：