AngularJS指令被称为两次失败

我有（可能）一个非常简单的问题，但事情是，我花了超过预期的时间试图解决它，我还没有做到。AngularJS指令被称为两次失败

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

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

任何想法？

谢谢

来源

2013-10-03 abottoni

这里有一个更新的提琴的作品： 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-03 14:09:06 Andrei

哈，结束标签...我有一段时间搞清楚了。 – Langdon

更简洁的方法是使用'scope：{buttonOptions：'= options'}'并避免在链接函数中设置buttonOptions。 –

是的，很好的电话。我在做范围类似的事情，但它不起作用。 “奇怪的原因”是，OP试图自动关闭指令标签，但HTML5中的“自定义”标签不是自闭合的，当您尝试时，您会得到一个“run on”标签。换句话说，你会得到'' –

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

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

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

来源

2013-10-03 14:03:37

AngularJS指令被称为两次失败

回答

相关问题