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，那么内容将不会知道任何有关角度的信息，因此控制器将无法在外部HTML中运行。

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

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

<!-- 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>

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

1 个答案: