plnkr链接-链接
在上面的plnkr中，我创建了一个名为dynamic-table的自定义指令，该指令应将两个JSON对象作为属性并显示使用这两个JSON生成的表。
以下是index.html中我创建了dynamic-table指令的两个实例的代码-
<body ng-app="myApp">
<div ng-controller="myCtrl" ng-init="initializeFunction()">
<dynamic-table tablestructure="personDetailsObject" tabledata="personDetailsData"></dynamic-table>
<dynamic-table tablestructure="productTableStructure" tabledata="productTableData"></dynamic-table>
</div>
</body>
呈现的HTML并不总是一致的，并且不会加载第一个表。看起来这是范围问题，由于存在一些变量，这些变量在实例之间共享并产生问题，但是我无法找出解决方法。
另外我正在使用来自arboreal.js的javascript库，它不是有角度的。在我的链接函数中使用从该库中创建的对象。不知道这是否会造成此问题。
注意-如果该指令只有一个实例，则该指令可以正常工作。
请提供相同的解决方案。
好的，这里没有考虑几件事情。在您的朋克中，您有以下功能：
scope.$watch('tablestructure', function(newTablestructure){
generateTheDataStructure(newTablestructure);
});
generateTheDataStructure = function(arguments) {...etc}
由于指令是优先执行的0，因此在控制器之前newTableStructure，由于控制器中的初始声明，的初始值是一个空对象，但是手表仍将在第一次执行，然后它将变为您$http返回的值。scope.$watch将考虑此第一个更改，因此generateTheDataStructure将被执行，但generateTheDataStructure 在第一个指令中执行的函数不一定与您在监视之下声明的函数相同，这是因为该指令的第二个实例也正在执行，并且该函数是全局赋值，因此它可能已经可用，所以也许您'失去了函数调用范围的参考，我无法真正告诉X和O全局函数正在发生什么，但这就是破坏您的指令的原因。
当您generateTheDataStructure在第二条指令中调用watch内部时，该函数已经存在，因此您的表可以正常显示。
为了解决这个问题，您应该在函数的词法范围内添加link函数，如下所示：
var generateTheDataStructure = function(arguments) {...etc}
或声明它
function generateTheDataStructure(arguments) {...etc}
由于函数声明是悬挂式的，因此第二种方法更安全。我希望对$digest周期有更多了解，以便真正了解这里发生的事情，但这应该可以解决您的指令。
结论：不要使用全局变量。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句