current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

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>
share|improve this answer
    
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). –  shaunhusain Oct 18 '13 at 22:15
    
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? –  Colet Oct 19 '13 at 8:39
    
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. –  Andyrooger Oct 19 '13 at 14:23
    
Cool Andyrooger! now it works! Thank you so much! –  Colet Oct 19 '13 at 15:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.