AngularJS指令调用两次失败

Question

我(可能)有一个非常简单的问题,但问题是我花了比预期更多的时间试图解决它而我还没有完成它.

我在应用程序中的指令很难复制,因此,为了简单起见,我在JSFiddle中创建了一个带有简单指令但具有相同结果的脚本.

从本质上讲,问题与一个指令有关,该指令在每个指令上使用不同的选项被调用两次.结果是,呈现的指令始终采用第一组选项的值(有时仅使用第二组选项).

我的HTML:

<div ng-controller="MyCtrl">
    <button-menu options="options1" />
    <button-menu options="options2" />
</div>

我的选项(在控制器中):

// Button Options        
$scope.options1 = {
    id: "1",
    buttonTemplate: "<span style=\"font-size:16pt\">Button 1</span>"
};

$scope.options2 = {
    id: "2",
    buttonTemplate: "<span style=\"font-size:10pt\">Button 2</span>"
};

我不知道我做错了什么,但实际上这是我第一次需要在同一页面中至少运行两次的指令,所以可能我错过了一些东西.

有任何想法吗？

谢谢

Answer 1

这是一个有效的更新小提琴:http: //jsfiddle.net/DewZb/4/

首先,出于奇怪的原因,您需要按钮菜单的结束标记:

<button-menu options="options1"></button-menu>
<button-menu options="options2"></button-menu>

创建一个孤立的范围:

scope: {options: '='}

然后在链接功能:

scope.buttonOptions = scope.options;