1

我是 AngularJS 的新手。

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

索引.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 文件中，但我在控制器中定义的功能不起作用。

任何的想法？如果我不清楚，请告诉我。谢谢你。

4

1 回答 1

2

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

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

下面是一个使用ng-include. 我还替换了 jQuery click 处理程序ng-click和.fadeInsng-show以使解决方案更有棱角。

<!-- 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>
于 2013-10-18T21:49:34.693 回答