CODEWITHSUNDEEP
javascripthtmlangularjsiframe
Colet
Colet

Reputation: 495

how to put controller in external html file angularjs

I am quite new in AngularJS.

I have a web app that has some buttons:

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>

and when I click on the different buttons, they show iframes depending on the clicked button. In these iframes I put an external html file by src.

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

Until here no problem.

The problem is in the external html files (a.html and b.html) that need a different controller each. I tried to put the ng-controller tag in the iframe and in the external html files but the functions that I have defined in the controller do not work.

Any idea? If I was not clear, please let me know. Thank you.

Upvotes: 1

Views: 1919

Answers (1)

Andyrooger
Andyrooger

Reputation: 6746

If you are loading iframes then the content won't know anything about angular so controllers won't function in the external HTML.

You might want to look at ng-include for including partial HTML files into your page. Using this, the HTML will be inserted directly into your page and compiled/linked like the rest of the app.

Below is an example using ng-include. I have also replaced the jQuery click handlers with ng-click and the .fadeIns with ng-show to make the solution a bit more angular.

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

Upvotes: 2

Related Questions