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

Question

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

请检查这个jsfiddle ：

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

每个工具toolbarItem都有一个隔离的范围，但是所有toolbarItems toolbarData的toolbarItems被最后一个覆盖。

我怎么了

我有一个解决方案（ jsfiddle链接 ）。 但这不是成角度的方法。

我序列化了toolbarData并将其写到toolbarItem标记。

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

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);
});