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

Question

我在AngularJS中很陌生。

我有一個帶有一些按鈕的Web應用程序：

的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 click處理程序，並用ng-show替換了.fadeIn 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>