Javascript 自定义指令的多个实例失败_Javascript_Angularjs_Json

Javascript 自定义指令的多个实例失败

javascript angularjs json

Javascript 自定义指令的多个实例失败,javascript,angularjs,json,Javascript,Angularjs,Json,Plnkr链路-- 在上面的plnkr中，我创建了一个名为dynamictable的定制指令，该指令应该接收两个JSON对象作为属性，并显示使用这两个JSON生成的表下面是index.html中的代码，我在其中创建了动态表指令的两个实例- <body ng-app="myApp"> <div ng-controller="myCtrl" ng-init="initializeFunction()"> <dynamic-table table

Plnkr链路--

在上面的plnkr中，我创建了一个名为dynamictable的定制指令，该指令应该接收两个JSON对象作为属性，并显示使用这两个JSON生成的表

下面是index.html中的代码，我在其中创建了动态表指令的两个实例-

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

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

请提供相同的解决方案。

好的，这里有几件事你没有考虑。在您的plunker中，您有：

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

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

由于指令以优先级

执行，因此在控制器之前，

newTableStructure

的初始值是一个空对象，因为控制器中有初始声明，但是手表仍将第一次执行，然后它将变为

$http

返回的任何值<代码>范围。$Cabor 将考虑此第一更改，因此<代码> > GeaTeDATA结构> /代码>将被执行，但是在第一个指令中执行的<代码>生成TeDATA结构< /COD>函数可能不一定是您在表下方声明的相同函数，因为指令的第二个实例也在执行中，而函数是一个全局赋值，它可能已经可用，所以可能您正在丢失调用函数的范围的引用，我无法真正说出这个全局函数的X和O，但这就是违反你的指令的原因

当您在第二个指令中调用watch内部的

generateTheDataStructure

时，该函数已经存在，因此您的表呈现良好

为了解决这个问题，您应该在

链接的词法范围内分配函数，如下所示：
var generateTheDataStructure = function(arguments) {...etc}

或者申报
function generateTheDataStructure(arguments) {...etc}

由于函数声明是挂起的，所以第二种方法更安全。我希望对$digest
循环有更多的了解，以便真正理解这里发生的事情，但这应该会修正您的指令
结论:
不要使用全局变量。