how to put controller in external html file angularjs

Question

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.

Andyrooger · Accepted Answer · 2013-10-19 14:39:33Z

2

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>

edited Oct 19, 2013 at 14:39

answered Oct 18, 2013 at 21:49

Andyrooger

6,7461 gold badge45 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shaunhusain Over a year ago

Agree ng-include is the way to go. When you have an iframe it has it's own context and doesn't seem to inherit anything from the wrapping page (CSS etc., I fought with this on the facebook plugins, some things could be done with classes but nothing can be applied based on the iframe context from what I could tell... possibly a javascript workaround, but wasn't worth it).

Colet Over a year ago

Thank you for your answers! I tried your solution in these ways: <iframe class="aField" style="display: none;" ng-include src="a.html" ng-controller="controllerA" width="700" height="1000" ></iframe> and like this: <body ng-app="app" ng-controller="controllerA"> <iframe class="aField" style="display: none;" ng-include="a.html" width="700" height="1000" ></iframe> but it does not works...what am I doing wrong?

Andyrooger Over a year ago

You don't need to use iframe if you have ng-include. It works either like a replacement for the iframe element, or like a src attribute that you can put on other elements (usually div), but I'm not sure it will work on iframe. I'll add an example to my answer shortly.

Collectives™ on Stack Overflow

how to put controller in external html file angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related