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;

Answer 2

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

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

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

AngularJS指令调用两次失败

2 个答案: