如何将控制器放入外部html文件angularjs

Question

我是 AngularJS 的新手。

我有一个带有一些按钮的网络应用程序：

index.html

<button class="aButton">a</button>  
<button class="bButton">b</button>

 <script>
   $(document).ready(function(){
      $(".aButton").click(function(){
        $(".aField").fadeIn(400);
      });
   });
</script>

<script>
  $(document).ready(function(){
      $(".bButton").click(function(){
        $(".bField").fadeIn(400);
      });
   });
</script>

当我点击不同的按钮时，它们会根据点击的按钮显示 iframe。在这些 iframe 中，我通过 src 放置了一个外部 html 文件。

<iframe class="aField" style="display: none;" src="a.html" width="700" height="1000" ></iframe>
<iframe class="bField" style="display: none;" src="b.html" width="700" height="1000" ></iframe>

到这里为止没问题。

问题出在需要不同控制器的外部 html 文件（a.html 和 b.html）中。 我尝试将 ng-controller 标签放在 iframe 和外部 html 文件中，但我在控制器中定义的功能不起作用。

有什么想法吗？ 如果我不清楚，请告诉我。谢谢。

Answer 1

如果您正在加载 iframe，那么内容将不了解任何有关 Angular 的信息，因此控制器将无法在外部 HTML 中运行。

您可能需要查看 ng-include 以将部分 HTML 文件包含到您的页面中。使用它，HTML 将直接插入您的页面并像应用程序的其余部分一样编译/链接。

以下是使用ng-include 的示例。我还用ng-click 替换了jQuery 点击处理程序，用ng-show 替换了.fadeIns，以使解决方案更有棱角。

<!-- These buttons just set variables on the scope when clicked -->
<button ng-click="showA=true">a</button>  
<button ng-click="showB=true">b</button>

<script>
  // Nothing left here now
  // The contents of ng-click could be moved into a JS controller here...
</script>

<!-- the ng-include attribute value is an angular expression. If you use a string, wrap it in quotes -->
<div ng-include="'a.html'" ng-show="showA" width="700" height="1000"></div>
<div ng-include="'b.html'" ng-show="showB" width="700" height="1000" ></div>