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

Question

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

请看看这个jsfiddle：

输出是"baz baz baz"，但它应该是"foo bar baz"的。

每个toolbarItem都有一个独立的作用域，但所有toolbarItems的toolbarData都被最后一个作用域覆盖。

我做错了什么？

我有一个解决方案（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);
});