Question

Plnkr链接 - link

在上面的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库，它不是有角度的。在我的链接函数中使用从此库创建的对象。不确定这是否会造成这个问题。

注意 - 如果只有一个实例，该指令可以正常工作。

请为此提供解决方案。

Answer 1

好的，这里有一些你没有考虑的事情。在你的plunker你有这个：

scope.$watch('tablestructure', function(newTablestructure){
    generateTheDataStructure(newTablestructure);
});

generateTheDataStructure = function(arguments) {...etc}

由于指令在优先级0执行，因此在控制器之前，newTableStructure的初始值是一个空对象，因为控制器中的初始声明，但是手表仍将执行第一次，然后它会改变为$http返回的任何内容。 scope.$watch将考虑第一次更改，因此generateTheDataStructure将被执行，但第一个指令中执行的generateTheDataStructure函数的“版本”可能不一定与您在下面声明的函数相同手表，因为指令的第二个实例也正在执行，并且该函数是一个全局赋值，它可能已经可用，所以也许你正在失去对函数调用范围的引用，我可以我真的告诉X和O这个全局函数发生了什么，但那就是打破你的指令。

当您在第二个指令中调用监视内部的generateTheDataStructure时，该函数已经存在，因此您的表格呈现正常。

为了解决这个问题，您应该在link函数的词法范围内配置函数，如下所示：

var generateTheDataStructure = function(arguments) {...etc}

或声明它

function generateTheDataStructure(arguments) {...etc}

由于函数声明被提升，第二种方式更安全。我希望对$digest周期有更多的了解，以便真正理解这里发生的事情，但这应该可以修复你的指令。

结论： 不要使用全局变量。

多个自定义指令实例失败

1 个答案: