1

我遇到了（可能）一个非常简单的问题，但问题是我花了比预期更多的时间试图解决它，但我还没有完成。

我在应用程序中的指令很难复制，因此，为了简单起见，我在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>"
};

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

有任何想法吗？

谢谢

4

2 回答 2

6

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

首先，出于一个奇怪的原因，您需要按钮菜单的结束标记：

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

创建一个隔离范围：

scope: {options: '='}

然后在链接函数中：

scope.buttonOptions = scope.options;
于 2013-10-03T14:09:06.480 回答
2

范围在页面上的相同自定义指令之间共享。您可以将指令设置为具有隔离范围。

您看到它们采用第一个或第二个的原因是因为链接发生在不同的时间，具体取决于角度编译对它们的排序方式。这是因为它们都具有相同的优先级。

http://www.ng-newsletter.com/posts/directives.html

于 2013-10-03T14:03:37.470 回答