Angularjs Angular未正确确定隔离指令与服务器呈现内容的作用域_Angularjs

Angularjs Angular未正确确定隔离指令与服务器呈现内容的作用域

angularjs

Angularjs Angular未正确确定隔离指令与服务器呈现内容的作用域,angularjs,Angularjs,我正在开发一个web应用程序，它在服务器呈现的HTML之上使用angular 我试图使用一段呈现的HTML作为可重用组件（指令），因此我在返回的HTML中的适当标记上附加了一个属性指令。这个指令需要有一个独立的作用域，它还将包括应该是这个独立指令中的子作用域的子指令不幸的是，angular没有从返回的HTML创建具有适当范围层次结构的指令。隔离作用域中的子指令是隔离作用域的同级指令（而不是子指令）。现在，如果我将这些指令更改为使用客户端模板，它将正常工作。因此，似乎angular不喜欢从服务器

我正在开发一个web应用程序，它在服务器呈现的HTML之上使用angular

我试图使用一段呈现的HTML作为可重用组件（指令），因此我在返回的HTML中的适当标记上附加了一个属性指令。这个指令需要有一个独立的作用域，它还将包括应该是这个独立指令中的子作用域的子指令

不幸的是，angular没有从返回的HTML创建具有适当范围层次结构的指令。隔离作用域中的子指令是隔离作用域的同级指令（而不是子指令）。现在，如果我将这些指令更改为使用客户端模板，它将正常工作。因此，似乎angular不喜欢从服务器生成的HTML构建这种形式的指令

为了更好地说明我的问题，我创建了两个插件——一个工作正常（客户端模板），另一个工作不正常（服务器呈现的HTML）

index.html

<body>
  <div isolate-dir>
    Content from the server
    <div child-dir>
      More content from the server: <span ng-bind="testVar">server data</span>
    </div>
  </div>
</body>

<body>
  <div isolate-dir></div>
</body>

输出

child dir scope [3 -> 1]
isolate dir scope [2 -> 1]

child dir scope [3 -> 2]
isolate dir scope [2 -> 1]

index.html

<body>
  <div isolate-dir>
    Content from the server
    <div child-dir>
      More content from the server: <span ng-bind="testVar">server data</span>
    </div>
  </div>
</body>

<body>
  <div isolate-dir></div>
</body>

运行插件并观察控制台输出时，可以看到范围层次结构在客户端模板版本中是正确的，而在服务器呈现版本中是不正确的

为什么服务器呈现的内容的作用域层次结构不正确？解决此问题的最佳方法是什么？

好消息是，这与“服务器”呈现无关

问题来自于您对指令的理解。隔离指令（

isolatedir

）确实具有影响其模板和控制器的隔离作用域。但是HTML层次结构与角度作用域层次结构没有关系：只有

将有一个独立的作用域，但不是它的所有子元素
如果您希望子元素从父级
div
的作用域继承，您应该将这些子元素放入隔离指令的模板中（这在第一个示例中完成，因此它可以工作），或者使用
link
函数的
transclusion
参数将父范围传播到其内部元素
以下是使用此方法的plunkr：

如果这仍然让您感到困惑，您可以阅读更多关于它的内容，例如：

谢谢您的回复。我不确定我是否完全理解
转换
与这个特定场景的关系，因为我没有构建一个转换指令。它本质上是一个典型的指令——只是已经被服务器“预先填充”。不幸的是，我别无选择，只能为这个应用程序使用服务器呈现的内容。无论哪种方式，我都试图通过使用transclusion参数在本地修复它，但没有效果（我引用了链接的文章）。您是否介意给出一个示例，说明如何在不使用模板的情况下修复plunker的服务器呈现版本？这就是要点：如果不使用转换，内部HTML将不会从指令继承其作用域。如果你想这样做，你需要使用转换。检查小提琴：我现在明白了。感谢您的澄清和示例。